高德地圖海量點加載2種方式

一、普通maker建立，而後添加到地圖上，頁面會出現卡頓，甚至有可能卡死，頁面崩潰。。。

async initMark() {
  var map = this.map
  this.removeMarkers()
  this.map.setZoom(7)
  this.map.setCenter([108.907295, 35.601474])
  this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(-3, -16) })
  let infoWindow = this.infoWindow
  let list = this.list
  let category = this.mapDataType ? '' : this.category
  for (var i = 0; i < list.length; i++) {
    let iconType =
      list[i] && list[i].index ? list[i].index.split('_data')[0] : ''
    let icon = iconType ? this.newIcon(iconType) : this.icon
    let lon = list[i].lon || list[i].end_lon
    let lat = list[i].lat || list[i].end_lat
    // console.log(i, lon, lat)
    if (lon && lat) {
      let marker = new AMap.Marker({
        position: [lon, lat],
        data: list[i],
        map: map,
        offset: new AMap.Pixel(-11, -11),
        icon: icon
      })
      let that = this
      marker.on('click', function(e) {
        let myRow = ''
        let showItem = []
        let shwoTitlekey = ''
        let data =e.target.w.data || e.target.Ce.data
        let trueKey = data && data.index ? data.index.split('_data')[0] : ''
        if (data.index) {
          shwoTitlekey = getKeyByCategory(trueKey).nameKey
          detailByIndexAndIdApi({ index: data.index, id: data.id }).then(
            res => {
              data = res.data
              showItem = formItem[trueKey]
              myRow =
                '<div class="info_title">' + data[shwoTitlekey] + '</div>'
              if (showItem && showItem.length) {
                for (let i = 0; i < showItem.length; i++) {
                  if (showItem[i].type === 'objArray') {
                    let val = ''
                    for (let j = 0; j < showItem[i].name.length; j++) {
                      val +=
                        data[showItem[i].name[j].value] +
                        showItem[i].name[j].label
                    }
                    myRow +=
                      '<div class="info_row"><span class="info_lable">' +
                      showItem[i].label +
                      '：</span>' +
                      val +
                      '</div>'
                  } else if (showItem[i].type === 'array') {
                    let val = ''
                    for (let j = 0; j < showItem[i].name.length; j++) {
                      if (data[showItem[i].name[j]]) {
                        val +=
                          j > 0
                            ? '、' + data[showItem[i].name[j]]
                            : data[showItem[i].name[j]]
                      }
                    }
                    myRow +=
                      '<div class="info_row"><span class="info_lable">' +
                      showItem[i].label +
                      '：</span>' +
                      val +
                      '</div>'
                  } else {
                    let currentVal = data[showItem[i].name]
                      ? data[showItem[i].name]
                      : '無'
                    myRow +=
                      '<div class="info_row"><span class="info_lable">' +
                      showItem[i].label +
                      '：</span>' +
                      currentVal +
                      '</div>'
                  }
                }
              }
              let html = myRow
              infoWindow.setContent(html)
              infoWindow.open(map, e.target.getPosition())
            }
          )
        }
      })
    }
    // marker.emit('click', { target: marker })
  }
}

二、 經過new AMap.MassMarks實現，頁面能夠很好的渲染，不會出現卡死。

async initMark() {
  var map = this.map
  this.resetMap()
  this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(-3, -16) })
  let infoWindow = this.infoWindow
  let list = this.list
  let category = this.mapDataType ? '' : this.category
  let style = []
  list.forEach((item, ind) => {
    let lon = item.lon || item.end_lon
    let lat = item.lat || item.end_lat
    item.lnglat = [lon, lat]
    let iconType = item && item.index ? item.index.split('_data')[0] : ''
    let icon = iconType ? this.newIcon2(iconType) : this.icon
    style.push(icon)
    item.style = ind
  })
  var mass = new AMap.MassMarks(list, {
    opacity: 1,
    zIndex: 111,
    cursor: 'pointer',
    style: style
  })
  var marker = new AMap.Marker({ content: ' ', map: map })

  mass.on('click', function(e) {
    let myRow = ''
    let showItem = []
    let shwoTitlekey = ''
    let data = e.data || e.target.w.data || e.target.Ce.data
    let trueKey = data && data.index ? data.index.split('_data')[0] : ''
    if (data.index) {
      shwoTitlekey = getKeyByCategory(trueKey).nameKey
      detailByIndexAndIdApi({ index: data.index, id: data.id }).then(
        res => {
          data = res.data
          showItem = formItem[trueKey]
          myRow = '<div class="info_title">' + data[shwoTitlekey] + '</div>'
          if (showItem && showItem.length) {
            for (let i = 0; i < showItem.length; i++) {
              if (showItem[i].type === 'objArray') {
                let val = ''
                for (let j = 0; j < showItem[i].name.length; j++) {
                  val +=
                    data[showItem[i].name[j].value] +
                    showItem[i].name[j].label
                }
                myRow +=
                  '<div class="info_row"><span class="info_lable">' +
                  showItem[i].label +
                  '：</span>' +
                  val +
                  '</div>'
              } else if (showItem[i].type === 'array') {
                let val = ''
                for (let j = 0; j < showItem[i].name.length; j++) {
                  if (data[showItem[i].name[j]]) {
                    val +=
                      j > 0
                        ? '、' + data[showItem[i].name[j]]
                        : data[showItem[i].name[j]]
                  }
                }
                myRow +=
                  '<div class="info_row"><span class="info_lable">' +
                  showItem[i].label +
                  '：</span>' +
                  val +
                  '</div>'
              } else {
                let currentVal = data[showItem[i].name]
                  ? data[showItem[i].name]
                  : '無'
                myRow +=
                  '<div class="info_row"><span class="info_lable">' +
                  showItem[i].label +
                  '：</span>' +
                  currentVal +
                  '</div>'
              }
            }
          }
          let html = myRow
          infoWindow.setContent(html)
          infoWindow.open(map, e.data.lnglat)
        }
      )
    }
  })
  this.mass= mass
  mass.setMap(map)
}

三、關於地圖重繪

普通maker能夠經過重繪地圖的方式： this.map.clearMap()
海量點重繪能夠經過清除海量點重繪： this.mass.clear()