bml-marker-clusterer + bm-marker + bm-label实现根据经纬度标注点,效果实现了,但是一直报错。
<template>
<baidu-map class="baidu_map" :center="center" :scroll-wheel-zoom="true" :zoom='zoom' @ready="handler">
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
<bml-marker-clusterer :averageCenter="true" v-if="markers">
<bm-marker v-for="(marker,index) of markers" :key="index" :position="{lng: marker.commulongit, lat: marker.commulatitude}" @click='goInfo'>
<bm-label :content="marker.commuName" :labelStyle="labelStyle" :offset="{width: -10, height: 30}" />
</bm-marker>
</bml-marker-clusterer>
</baidu-map>
</template>
import Vue from 'vue'
import { BaiduMap, BmlMarkerClusterer } from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'mh64sqRAfo***************ggvG'
})
export default {
components: {
BmlMarkerClusterer
},
data() {
return {
points: [],
markers: [],
center: {lng: 108, lat: 34},
zoom: 6,
labelStyle: {color: '#4b8bf4' , fontSize : '14px', border: '1px solid #4b8bf4'}
}
},
created() {
this.getAllAddress()
},
methods: {
handler ({BMap, map}) {
// console.log("......", BMap, ",,,,,,", map)
this.center.lng = 108
this.center.lat = 34
this.zoom = 6;
},
goInfo(e) {
// console.log("e.....e......", e);
},
async getAllAddress(){
let getAll = await getCommunityAll();
if(getAll.status == 200){
this.points = getAll.data;
this.markers = this.points.filter( item => {
if(item.commulongit && item.commulatitude){
return item
}
});
}
},
}
}
.baidu_map{
height: 100%;
}
报错信息:
有多少条数据,就有n组报错信息。不知道什么原因导致的,循环列表那里明明已经加了click方法了。不加click方法,坐标渲染不出来。有哪位大神帮忙看一下,不胜感谢!
效果图:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…