点标记 bm-marker的使用
- import引入bmMarker 和bmLabel 组件
html
<script>
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 },
}
</script>
- 在
<baidu-map>
中加入<bm-marker>
和<bm-label>
<bm-marker>
是点标记,其中参数position是标记点的经纬度;<bm-label>
是标记点的文字标注,其中参数content是文字内容、labelStyle是文字样式、offset是相对位置
html
<template>
<div class="map-content" v-if="iscollegeRole">
<baidu-map class="bm-view map"
:ak="mapAK"
:scroll-wheel-zoom="true"
:center="mapData.center"
:zoom="mapData.zoom"
:continuous-zoom="true"
@ready="handler">
<bm-marker :position="mapData.center">
<bm-label content="标记点"
:labelStyle="labelStyle"
:offset="{width: -10, height: 30}"/>
</bm-marker>
</baidu-map>
</div>
</template>
完整这两步就可以显示点标记了,下面放了完整代码
注:若开发时发现控制台报错
Error in callback for watcher "labelStyle": "TypeError: Cannot read property 'setStyle' of undefined"
原因: bm-label组件的参数labelStyle使用方法不正确导致的,labelStyle需要先在data中声明,然后在<bm-label>
中使用
javascript
<script>
export default {
data() {
return {
labelStyle:{color: 'red', fontSize : '14px',fontWeight:'600'},
}
},
}
</script>
完整代码:
html
<template>
<div class="map-content" v-if="iscollegeRole">
<baidu-map class="bm-view map"
:ak="mapAK"
:scroll-wheel-zoom="true"
:center="mapData.center"
:zoom="mapData.zoom"
:continuous-zoom="true"
@ready="handler">
<bm-marker :position="mapData.center">
<bm-label content="标记点"
:labelStyle="labelStyle"
:offset="{width: -10, height: 30}"/>
</bm-marker>
</baidu-map>
</div>
</template>
<script>
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
}
},
}
</script>
<style scope>
.map {
width: 100%;
height: 400px;
}
</style>