百度地图调用点聚合和弹窗事件

2025-01-09前端开发

179

什么是点聚合

点聚合（MarkerClusterer 标记聚合器）用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。显示效果如下图：

简单实例

HTML \ CSS

<style>
    body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}
    #allmap {width: 100%;height: 500px;}
    p {margin-left: 5px;font-size: 14px;}
    /*隐藏百度logo*/
    .anchorBL a img{display: none;}
    .anchorBL span span{display: none;}
</style>

<body style="min-height: 100%;">
   <div id="allmap"></div>
</body>

JS代码
启用点聚合功能，其中的 data 可以根据需求进行异步获取，得到的数据中应当有横纵坐标
可以开启定位，达到每次打开地图快速定位到相关位置

<script type="text/javascript" 
       src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script>
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,6);
    //启用滚轮放大缩小
    map.enableScrollWheelZoom(true);

    // 相关数据(也可以根据需求异步获取）
    // 可以确定的是每条数据应要有横纵坐标
    var data = [{"mapy": "32.94584", "mapx": "112.894350", "time": "12:30"},
        {"mapy": "33.34683", "mapx": "112.694300", "time": "11:30"},
        {"mapy": "33.54702", "mapx": "112.094380", "time": "10:30"},
        {"mapy": "33.148780", "mapx": "116.494390", "time": "13:30"}
    ];

    var markers = [];

    // 遍历得到的数据
    $.each(data, function (i, item) {
        // 横纵坐标定点
        var point = new BMap.Point(item.mapx, item.mapy);
        var marker = new BMap.Marker(point);
        // 获取数据
        var content = item.time;
        // 添加点击事件
        //addClickHandler(content, marker);

        markers.push(marker);

    });

    // 根据ip定位
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        console.log("当前定位城市:"+cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);

    // 添加点聚合效果
    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
</script>

聚合点的样式修改
如果觉得默认样式不好看，或者有特殊的需求，可以自定义点的样式

// 添加点聚合效果
    var markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers,
       //最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
        minClusterSize: 2, 
        styles: [{
           // 此处URL不知道能否用本地图片，自己试了一下不能，待解答！
            url: 'dist/img/smallred.png',
            size: new BMap.Size(0, 0)
        }]
    });

添加点击事件

// 添加点击事件,可在循环数据时调用
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                openInfo(content, e)
            }
        );
    }

弹窗
openInfo(content, e)，这里可以传需求的参数；
var infoWindow = new BMap.InfoWindow( 拼接数据 , opts);，这里可以自定义拼接参数；

// 弹窗
    var opts = {
        width: 270, // 信息窗口宽度
        height: 100, // 信息窗口高度
        enableMessage: true//设置允许信息窗发送短息
    };

    // 弹窗点击事件
    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        // 创建信息窗口对象
        var infoWindow = new BMap.InfoWindow(`<div>自定义内容</div><div>${content}</div>` , opts);
        //开启信息窗口
        map.openInfoWindow(infoWindow, point);
    }

The End

点聚合弹窗事件

相关推荐

百度地图调用点聚合和弹窗事件

热门文章

热门精品源码

最新VIP资源