vue+高德地图（点聚合）

利用点聚合处理海量点标记 两个版本使用方法

高德地图版本1.4.15

参考：lbs.amap.com/api/javascr…

在public/index.html中引入高德地图api

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key值&plugin=AMap.MarkerClusterer"></script>

初始化地图

this.mapObj = new AMap.Map(domId, {
        resizeEnable: true,
        center: [105, 34],
        zoom: 4
    });

创建点实例

for (var i = 0; i < points.length; i += 1) {
    marker = new AMap.Marker({
         position: points[i]['lnglat'],
         content: content,  //点标记显示内容，可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖
         offset: new AMap.Pixel(-10, -30)
    });
    this.markers.push(marker)
    this.setMarkerClick(marker, markerInfos)  //添加标记点的点击事件
}
addCluster(this.markers)

点聚合（v1.4.15双击聚合点自动散开）

addCluster(markers) {
    if(this.cluster){
        this.cluster.setMap(null)
    }
    this.cluster = new AMap.MarkerClusterer(this.mapObj, markers, {
        gridSize: 80,  // 设置网格像素大小 默认60
        styles: style,  //聚合后的点标记的图标样式 指定了`renderClusterMarker`后`styles`无效
        renderClusterMarker: _renderClusterMarker  // 自定义聚合点样式 用来实现聚合点的自定义绘制
    });
}

添加信息窗体

setMarkerClick(marker, markerInfos) {
      // marker点击事件
      marker.on('click', (event) => {
        this.markerInfos = markerInfos
        const content = this.$refs.markerInfos  //写好的div标签块
        const position = [event.lnglat.lng, event.lnglat.lat]
        const infoWindow = new AMap.InfoWindow({
          isCustom: true,  //使用自定义窗体
          offset: new AMap.Pixel(16, -45)
        })
        infoWindow.setContent(content)
        infoWindow.open(this.mapObj, position)
     })
 }

高德地图版本2.0

参考：lbs.amap.com/api/jsapi-v… 在public/index.html中引入高德地图api

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=申请的key值&plugin=AMap.MarkerCluster"></script>

初始化地图

this.mapObj = new AMap.Map(domId, {
        resizeEnable: true,
        center: [105, 34],
        zoom: 4
    });

创建点实例

const points = []
this.list.map(item => {
    let obj = {}  //存放lnglat[lng,lat]
    obj.lnglat = [item.longitude, item.latitude]
    points.push(obj)
})
addCluster(points)

点聚合

addCluster(points) {
    if(this.cluster){
        this.cluster.setMap(null)
    }
    this.cluster = new AMap.MarkerCluster(this.mapObj, points, {
        gridSize: 80,  // 设置网格像素大小
        styles: style,  //聚合后的点标记的图标样式 指定了`renderClusterMarker`后`styles`无效
        renderClusterMarker: _renderClusterMarker,  // 自定义聚合点样式 用来实现聚合点的自定义绘制
        renderMarker: _renderMarker // 自定义非聚合点样式
    })
    /**
    **v2.0中的点击聚合点散开功能需自己写
    **/
    this.cluster.on('click',(item) =>{
        if(item.clusterData.length <= 1) {
          return
        }
        let alllng = 0,alllat = 0
        for(const mo of item.clusterData) {
          alllng += mo.lnglat.lng,
          alllat += mo.lnglat.lat
        }
        const lat = alllat / item.clusterData.length
        const lng = alllng / item.clusterData.length
        if(this.mapObj.getZoom() < 4) {
          this.mapObj.setZoomAndCenter(this.mapObj.getZoom() + 8, [lng,lat])
        } else if (this.mapObj.getZoom() < 8) {
          this.mapObj.setZoomAndCenter(this.mapObj.getZoom() + 4, [lng,lat])
        } else {
          this.mapObj.setZoomAndCenter(this.mapObj.getZoom() + 2, [lng,lat])
        }
   })
}

添加信息窗体(可以通过定义_renderMarker写入非聚合点的点击事件)

const _renderMarker = function(context) {
        const offset = new AMap.Pixel(-9, -9)
        context.marker.setOffset(offset)
        const content = ...  //显示内容 可以是HTML要素字符串或者HTMLElement对象
        //点击事件
        context.marker.on('click', ev => {
          context.marker.setContent(content)
        })
}