点标记 bm-marker的使用
- import引入bmMarker 和bmLabel 组件
<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是相对位置
<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>中使用
<script>
export default {data() {return {labelStyle:{color: 'red', fontSize : '14px',fontWeight:'600'},}},
}
</script>完整代码：
<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',//需要到百度地图官网申请akBMap:null,map:null,mapData: {//中心坐标center: { lng: 113.33, lat: 39.01 },//缩放级别,1~19zoom: 19},labelStyle:{color: 'red', fontSize : '14px',border:'none',background:'none',fontWeight:'600'},}},methods:{handler ({BMap, map}) {console.log(BMap, map)this.BMap = BMapthis.map = map}},
}
</script><style scope>
.map {width: 100%;height: 400px;
}
</style>
：C#实现指南)
