Vue Baidu Map–点标记bm-marker的使用、注意事项

本文介绍: 点标记 bm–make r的使用，报错Er ro r in callback fo r watch e r “labelSt yle“: “Ty peEr ro r: Ca nn o t read property ‘setSt yle’ of undefined“是bm–label 组件的参数 labelSt yle使用方法不正确导致的，labelSt yle需要先在data中声明。

点标记 b m–m a rker的使用

import 引入 bmMa rker 和bmLab el 组件

&lt;script&gt;
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&gt;

在<baidu-map>中加入<bm-marker>和<bm-label>

<bm-marker>是点标记，其中参数 position是标记点的经纬度；
<bm-label>是标记点的文字标注，其中参数 content是文字内容、lab elStyle是文字样式、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',//需要到百度地图官网申请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>