vue項目記錄-高德地圖2.0-使用海量點MassMarks

1. 背景

項目中需要展示各種標記點然后展示文字，當標記點數量過多，頁面就會十分卡頓。因為每個標記點和文字都是單獨渲染的，當頁面中的元素太多，自然就卡了。

2. 解決方案

最簡單的解決方案就是使用高德地圖官方提供的海量點MassMarks，將所有點放入一個對象中渲染，當然如果你一開始就用這個更好，實際上這個配置比單獨配置標注點要更加方便。

其他優化方案：

（1）數據隨屏幕所在位置加載，網絡上也有教程，目前我還沒使用過，但是項目還有其他覆蓋物，如果數據繼續增加遲早要考慮使用這種方案（需要后端提供接口）

（2）通過canvas自己繪制點，難度較高。

（3）避免一次性全部加載，可根據行政區划酌情加載。

3. 使用

    let style = {
        url: WellPng,
        anchor: new AMap.Pixel(15, 15),
        size: new AMap.Size(30, 30)
      }
      this.wellMass = new AMap.MassMarks(data, {
        opacity: 1,
        cursor: 'pointer',
        zooms: [8, 20],
        style: style
      })
      this.nowWellMarker = new AMap.Marker({
        content: ' ',
        zooms: [8, 20],
        map: this.map,
        offset: new AMap.Pixel(20, 20)
      })
      this.wellMass.on('mouseover', e => {
        this.nowWellMarker.show()
        this.nowWellMarker.setPosition(e.data.lnglat)
        this.nowWellMarker.setLabel({
          content: `<div>${e.data.chname}</div><div>經度:${e.data.lnglat[0]}</div><div>緯度:${e.data.lnglat[1]}</div>`
        })
      })
      this.wellMass.on('mouseout', e => {
        this.nowWellMarker.hide()
      })
      this.wellMass.setMap(this.map)

其中data為你要放入的數組，數組中的對象必須要的屬性為lnglat(Array)，其他不做要求，可選屬性值style(Number)，可以將上面的style對象設置為對象數組，然后通過style控制點的圖標等。

（官方文檔有更詳細說明，本文只作為一個引子，詳情請看官方文檔）

需要注意的是：如果你通過你的數據沒有lnglat，或者lnglat格式不對，很可能導致事件綁定失效，請注意核對數據，控制台不一定會有報錯