draw aggregation points
need
Plot the aggregated points in the map.
technical point
Official address: Vue Baidu Map
accomplish
<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>
analyze