高德地图API 2.0 点聚合实现学习文档

1. 点聚合

官方API参考手册：lbs.amap.com/api/javascr…

var styles =  [{
                url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -16)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/green.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -16)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
                size: new AMap.Size(36, 36),
                offset: new AMap.Pixel(-18, -18)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/red.png",
                size: new AMap.Size(48, 48),
                offset: new AMap.Pixel(-24, -24)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
                size: new AMap.Size(48, 48),
                offset: new AMap.Pixel(-24, -24)
            }]
        var points = [
          {lnglat: [108.425474,34.75856]},
          {lnglat: [105.634946,37.700142]},
          {lnglat: [106.777524,37.821739]},
          {lnglat: [106.140317,38.28888]},
          {lnglat: [106.931333,37.700142] },
          {lnglat: [105.612974,37.386548] },
          {lnglat: [106.052427,36.331743] },
          {lnglat: [106.140317,35.976916] },
          {lnglat: [105.964536,36.825797] },
        ];
        
        let cluster =  new AMap.MarkerClusterer(
        this.map,     // 地图实例
        points, // 海量点数据，数据中需包含经纬度信息字段 lnglat
        {
            styles: styles,
            averageCenter:true,
        });

参考文档：blog.csdn.net/D_XY666/art…

2. JS API 如何通过Marker的id获取对应Marker对象？

JS API提供了用户自定义属性extData，可以在其中放入任意自定义的属性，比如 ID。赋予了id后的Marker，可通过遍历Marker判断id是否一致，来获取相应的Marker对象。

3. 使用点聚合后如何自定义点标记图标

将自定义的内容通过自定义属性传入非聚合点的自定义绘制方法里：

renderMarker: context => {
      const {
        icon,
        title,
        projectTypeKey,
        infoWindowData
      } = context.data[0].extData; //点数据里定义的自定义属性
      // context.marker.setOffset(new AMap.Pixel(0, 0));
      context.marker.setIcon(icon);
      context.marker.setTitle(title);
          ...
 }

4. 添加信息窗体&点击事件

 
     //非聚合点自定义样式交互
        renderMarker: context => {
          const {
            icon,
            title,
            projectTypeKey,
            infoWindowData
          } = context.data[0].extData; //点数据里定义的自定义属性
          // context.marker.setOffset(new AMap.Pixel(0, 0));
          context.marker.setIcon(icon);
          context.marker.setTitle(title);
          //marker鼠标点击事件
          if (infoWindowData) {
            // 信息窗体的内容 DOM或HTML
            let info =
              `<div onclick='getLngLat()' class='info-box'>
              ....
              </div>`;
            let infoWindow = new AMap.InfoWindow({
              anchor: "bottom-center",
              closeWhenClickMap: true,
              content: info
            });

            context.marker.on("click", () => {
              // const params = context.data[0].extData;
              // console.log(params); //参数
              infoWindow.open(this.map, context.marker.getPosition());
              
            });
          }
        }

5. 解决加载后闪出白底的问题

.amap-container{
  background-color: transparent !important;
}