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

点标记 bm-marker的使用

1. 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>
1
2
3
4
5
6
7
8

2. 在<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

完整这两步就可以显示点标记了，下面放了完整代码

---

注：若开发时发现控制台报错

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>

1
2
3
4
5
6
7
8
9
10

---

完整代码：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54