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. 中加入
  • 是点标记,其中参数position是标记点的经纬度;
  • 是标记点的文字标注,其中参数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中声明,然后在中使用

<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>

你可能感兴趣的:(Vue,Baidu,Map,bm-maker,bm-label,vue,Baidu,Map,点标记,setStyle,报错)