高德 几千条数据，点标记Marker转海量标注 LabelMarker

**
高德地图说：

当需要在地图添加千级以上的点标记时，LabelMarker 是代替 Marker 的更好选择。

**

• 如图，当数据量超过两千时，如果我们使用的是Marker点标记，页面将会非常的卡，卡顿很久都不出现标记点。
• 因此，我们采用高德推荐的LabelMarker 海量标注来代替Marker点标记。

原本的Marker点标记：

        let mapConfig = {
          zoom: 4,
          cityName: MapCityName,
          layers: "", //[new AMap.TileLayer.Satellite()]
          lang: this.lang === "zh" ? "zh_cn" : "en",
        }
        // 1. 实例化地图map
        let map = new AMap.Map("js-container", mapConfig)
        
        //自定义标记点 icon
        var icon = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(20, 20),
          // 图标的取图地址
          image: imageUrl,
          // 图标所用图片大小
          imageSize: new AMap.Size(20, 20),
        })
        
        /**
         * 循环添加经纬度创建标记点
         */
        for (var i = 0; i < this.dataList.length; i++) {
        
        // 2. 创建每个标记点
          var marker = new AMap.Marker({
            position: this.lnglat[i], //经纬度
            map: map, // 将标记点与地图实例绑定
            icon: icon,
            offset: new AMap.Pixel(-10, -10),
          })
          
          // 点击标记点时的事件
          marker.on("click", function (e) {})
          // 鼠标悬浮于标记点时的事件
          marker.on("mouseover", function (e) {})
          marker.on("mouseout",  function (e) {})
        }
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

LabelMarker海量标注：

        /*  
        1. 创建地图实例map；
        2. 创建 LabelMarker；
        3. 创建 LabelsLayer；
        4. 将已创建的 LabelMarker 添加到 LabelsLayer 上；
        5. 将 LabelsLayer 添加到地图实例 。
        */
        
        let mapConfig = {
          zoom: 4, //设置地图显示的缩放级别
          cityName: MapCityName,
          layers: "", //[new AMap.TileLayer.Satellite()]
          lang: this.lang === "zh" ? "zh_cn" : "en",
        }
        // 1. 实例化地图map
        let map = new AMap.Map("js-container", mapConfig)
        
        // 图标对象
        var icon = {
          // 图标尺寸
          type: "image", // 图标类型，现阶段只支持 image 类型
          size: new AMap.Size(20, 20),
          // 图标的取图地址
          image: imageUrl,
          // 图标所用图片大小
          imageSize: new AMap.Size(20, 20),
        }
        var markers = [] //标记点列表
        /**
         * 循环添加经纬度创建标记点
         */
        for (var i = 0; i < this.dataList.length; i++) {
        // 2. 创建海量标注点labelMarker 
          var labelMarker = new AMap.LabelMarker({
            position: this.lnglat[i], //标注点经纬度
            icon: icon,
            offset: new AMap.Pixel(-10, -10),
          })
          //数组保存标记点
          markers.push(labelMarker)

          // labelMarker海量标注点的点击事件
          labelMarker.on("click", function (e) {})
          // 鼠标悬浮于标记点时的事件
          labelMarker.on("mouseover", function (e) {})
          labelMarker.on("mouseout", function (e) {})
        }

        // 3. 创建 LabelsLayer 图层
        var labelsLayer = new AMap.LabelsLayer({
          zooms: [3, 20],
          zIndex: 1000,
          collision: false,
        })
		// 4. 将已创建的海量标注点 LabelMarker 添加到图层 LabelsLayer 上
        labelsLayer.add(markers)
        // 5. 将 LabelsLayer 添加到地图实例
        map.add(labelsLayer)
        
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
47
48
49
50
51
52
53
54
55
56
57
58
59

• 注，如果地图能出现，但是标注点未出现，可以试试刷新一下地图，看能否解决。比如：

          setTimeout(() => {
                this.$refs.aMap.initMap() //重新实例化地图
              }, 500)
1
2
3

高德地图-海量标注点教程
高德地图数据点过多卡顿的博客参考