地图聚合点展示

let that= this
 var points = [
        { lnglat: ["120.556168", "36.205298"] },
        { lnglat: ["120.556268", "36.205287"] },
        { lnglat: ["120.553368", "36.205276"] },
        { lnglat: ["120.626468", "36.205265"] },
        { lnglat: ["120.656568", "36.205254"] },
        { lnglat: ["120.556668", "36.205243"] },
      ];
      var count = points.length;
      // 自定义聚合点样式
      var _renderClusterMarker = function (context) {
        // 聚合中点个数
        var clusterCount = context.count;
        var div = document.createElement("div");
        let bgColor = "232, 64, 51";
        div.style.backgroundColor = "rgba(" + bgColor + ",.5)";
        var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 40);
        div.style.width = div.style.height = size + "px";
        div.style.border = "solid 1px rgba(" + bgColor + ",1)";
        div.style.borderRadius = size / 2 + "px";
        div.innerHTML = context.count;
        div.style.lineHeight = size + "px";
        div.style.color = "#ffffff";
        div.style.fontSize = "12px";
        div.style.textAlign = "center";
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div);
      };
      // 自定义非聚合点样式
      var _renderMarker = function (context) {
        let arr = [];
        arr.push({
          longitude: context.data[0].lnglat.lng,
          latitude: context.data[0].lnglat.lat,
        });
        var content =
          '
' +
          '
' +
          '
' +
          "
";
        var offset = new AMap.Pixel(-9, -9);
        context.marker.setContent(content);
        context.marker.setOffset(offset);
      };
      that.addCluster(_renderClusterMarker, _renderMarker, points);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

 // 聚合
    addCluster(_renderClusterMarker, _renderMarker, points) {
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      //自定义图标
      var sts = [
        {
          // url: "//a.amap.com/jsapi_demos/static/images/blue.png",
          size: new AMap.Size(32, 32),
          offset: new AMap.Pixel(-16, -16),
        },
      ];
      this.cluster = new AMap.MarkerCluster(this.myMap, points, {
        styles: sts,
        gridSize: 60,
        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
        renderMarker: _renderMarker, // 自定义非聚合点样式
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20