点标记 bm-marker的使用
import引入bmMarker 和bmLabel 组件
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import bmMarker from 'vue-baidu-map/components/overlays/Marker'
import bmLabel from './components/vue-baidu-map/components/overlays/Label'
export default {
components: {BaiduMap,bmMarker ,bmLabel },
}
在
:ak="mapAK" :scroll-wheel-zoom="true" :center="mapData.center" :zoom="mapData.zoom" :continuous-zoom="true" @ready="handler"> :labelStyle="labelStyle" :offset="{width: -10, height: 30}"/>
完整这两步就可以显示点标记了,下面放了完整代码
注:若开发时发现控制台报错
Error in callback for watcher "labelStyle": "TypeError: Cannot read property 'setStyle' of undefined"
原因: bm-label组件的参数labelStyle使用方法不正确导致的,labelStyle需要先在data中声明,然后在
export default {
data() {
return {
labelStyle:{color: 'red', fontSize : '14px',fontWeight:'600'},
}
},
}
完整代码:
:ak="mapAK" :scroll-wheel-zoom="true" :center="mapData.center" :zoom="mapData.zoom" :continuous-zoom="true" @ready="handler"> :labelStyle="labelStyle" :offset="{width: -10, height: 30}"/>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import bmMarker from 'vue-baidu-map/components/overlays/Marker'
import bmLabel from './components/vue-baidu-map/components/overlays/Label'
export default {
components: {BaiduMap,bmMarker ,bmLabel },
data() {
return {
mapAK: 'XXXXXXXXXXX',//需要到百度地图官网申请ak
BMap:null,
map:null,
mapData: {
//中心坐标
center: { lng: 113.33, lat: 39.01 },
//缩放级别,1~19
zoom: 19
},
labelStyle:{color: 'red', fontSize : '14px',border:'none',background:'none',fontWeight:'600'},
}
},
methods:{
handler ({BMap, map}) {
console.log(BMap, map)
this.BMap = BMap
this.map = map
}
},
}
.map {
width: 100%;
height: 400px;
}
相关链接
发表评论