【vue-baidu-map】BmlMarkerClusterer 聚合点

绘制聚合点

需求

在地图中绘制聚合点。

技术点

官方地址：Vue Baidu Map

实现

<template>
  <baidu-map class="bm-view" @ready="ready">
    <bml-marker-clusterer :averageCenter="true">
      <bm-marker  v-for="(marker,index) in markers" :key="index" :position="{lng:marker.lng,lat:marker.lat}"></bm-marker>
   </bml-marker-clusterer>
  </baidu-map>
</template>
<script>
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
  data() {
    return {
      BMap: null,
      map: null,
      markers:[],
    }
  },
  components: {
    BmlMarkerClusterer
  },
  methods:{
    ready({ BMap, map }) {
      this.BMap=BMap
      this.map=map

      this.point = new BMap.Point(113.27, 23.13); 
      map.centerAndZoom(this.point, 2);
      

      // 添加聚合点
      for (var i=0; i<100; i++) {
        var point = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21)
        this.markers.push({
          lat: point.lat,
          lng: point.lng
        })
      }
    }
  }
}
</script>
<style>
.bm-view {
  width: 300px;
  height: 300px;
}
</style>

分析