百度地图实现自定义标注的聚合

米元凯
2023-12-01

引入百度地图api文件

创建地图实例并设置基本属性
function huaLine(id, sj, numSelect) {
// 百度地图API功能
map = new BMap.Map(id, { mapType: BMAP_HYBRID_MAP }); //创建Map实例,混合地图,既有坐标,也有绿油油一片的卫星地图
map.centerAndZoom(new BMap.Point(104.06, 30.67), 5); //初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

引入百度地图点聚合插件

创建自定义标注实现点聚合
//创建数组
var markers = [];
//创建带有x和y以像素为单位的坐标的点
var pt = new BMap.Point(longitude, latitude);
//设置标注的图标及修改引入图片的大小
var myIcon = new BMap.Icon("…/…/img/work/yuan.png", new BMap.Size(32, 32));

             // 创建标注,设置标注的经纬度和标注的图片
        var marker2 = new BMap.Marker(pt, { icon: myIcon });
     //将需要聚合的点添加到数组中
      markers.push(marker2);
   //初始化点聚合
 var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

注:现有点聚合插件比较卡顿,可以去百度上搜索一些大佬修改过的插件使用

 类似资料: