vue项目中使用百度地图(vue-baidu-map)

本文介绍了在Vue项目中如何引入和使用vue-baidu-map,包括全局和局部引入方式,以及注意事项,如需设置地图的高度。同时,讨论了利用bm-local-search进行地图搜索时遇到的问题及解决方案。
摘要由CSDN通过智能技术生成
在使用vue做项目的时候,有用到百度地图,使用了vue-baidu-map插件,包括拾取位置坐标,搜索位置等

1.引入方式

clipboard.png
  • 可在app.js中全局引入
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  /* 需要注册百度地图开发者来获取你的ak */
  ak: 'YOUR_APP_KEY'
})
  • 也可以局部引入,组件需在node_modules/vue-baidu-map/components里面找,局部引入要在<baidu-map ak=''></baidu-map>中声明ak属性
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
export default {
  components: {
      BaiduMap,
      BmView,
      BmLocalSearch
  },
}
  • 使用(局部引用需要加上
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值