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

点标记 bm-marker的使用

  1. 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>
  1. <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>
相关推荐
float_六七13 天前
member access within null pointer of type ‘ListNode‘
c++·报错·空指针
南子大帅哥16 天前
android studio导入外部项目
android·ide·android studio·报错
Leanfeng_K1 个月前
【报错】mac m1 gateway 报错
spring·macos·spring cloud·gateway·报错
lzhlizihang1 个月前
使用DolphinScheduler调度实现sqoop增量导入时遇到 Caused by:Class QueryResult not found 错误解决
hadoop·报错·sqoop·ds
lzhlizihang2 个月前
使用sqoop将mysql数据导入到hive报错ClassNotFoundException、Zero date value prohibited等错误
hive·报错·sqoop
清园暖歌2 个月前
Ubuntu 20.04 解决 nvidia-smi 出错问题
linux·运维·ubuntu·报错·nvidia-smi
ladymorgana2 个月前
【日常总结】阿里云:windows server 过一段时间登录不进去,或提示:出现身份验证错误。 无法连接到本地安全机构
windows·安全·报错·身份验证·无法登录·sercer
艾派森3 个月前
已解决AttributeError: module ‘emoji‘ has no attribute ‘get_emoji_regexp‘
python·bug·报错
常乐_smile4 个月前
【总结】nginx源码编译安装报错./configure: error: SSL modules require the OpenSSL library.
nginx·报错·openssl·源码编译安装
皇夜_5 个月前
【nest】puppeteer 使用 addScriptTag 在页面中添加方法的方式
网络爬虫·报错·puppet·nest·addscripttag