BIGEMPA Js API示例中心
divIcon效果源代码展示

代码编辑区运行下载还原
<!DOCTYPE html>

<html>

<head>
    <meta charset='UTF-8' />
    <meta address='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet" />
    <script src="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .panel {
            min-width: 90px;
            min-height: 35px;
            position: absolute;
            left: 16px;
            bottom: 31px;
            cursor: default;
            border-radius: 4px;
            opacity: 0.96;
            border: 1px solid #14171c;
            box-shadow: 0px 2px 21px 0px rgba(33, 34, 39, 0.55);
            border-radius: 4px;
            box-sizing: border-box;
            background: linear-gradient(0deg, #f5f7fa 0%, #c3cfe2 100%);
            cursor: pointer;
        }

        .panel::before {
            content: "";
            width: calc(100% + 22px);
            height: 39px;
            position: absolute;
            bottom: -39px;
            left: -22px;
            background: url(/offline_data/newjunbiao/popup.png) 0px 0px no-repeat;
            background-position: 0px 0px;
        }

        .panel-text {
            width: 100%;
            height: 100%;
            min-height: 33px;
            text-align: center;
            padding: 5px 5px 0 5px;
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            color: #14171c;
            border: 1px solid #ffffff4f;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            white-space: nowrap;
        }
    </style>
    <title>divIcon效果</title>
</head>

<body>
    <div id='map'></div>
    <script>
        // 软件配置信息地址，软件安装完成之后使用本地地址，如：http://localhost:9000
        BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/";
        var map = BM.map('map', 'bigemap.dc-tian-w-satellite', { center: [30,104], zoom: 7, zoomControl: true, attributionControl: false, preferCanvas: true, minZoom: 1 });
        //点位数组
        var dataArr = [
            { lat: 30.65563420, lng: 104.06181335, address: "四川省成都市" },
            { lat: 25.03708281, lng: 102.70431519, address: "云南省昆明市" },
            { lat: 26.64500383, lng: 106.61407471, address: "贵州省贵阳市" },
            { lat: 29.55912345, lng: 106.53442383, address: "重庆市" },
        ];
       
        dataArr.forEach((v,i)=>{
             let m1 = BM.marker([v.lat,v.lng],{
                icon: BM.divIcon({
                    iconSize: null,
                    className: '',
                    popupAnchor: [5, 5],
                    shadowAnchor: [5, 5],
                    html: "<div class='panel animate__animated animate__shakeY animate__infinite animate__slower'><div class='panel-text' style=''>" + v.address + "</div>"
                })
            }).addTo(map);
            m1.on("click", (e) => {
                console.log("点击事件", e);
            })
        })
    </script>
</body>

</html>