vue项目中使用百度地图vuebaidumap

jiezi

5 年前

在使用 vue 做项目的时候，有用到百度地图，使用了 vue-baidu-map 插件，包括拾取位置坐标，搜索位置等

可在 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
  },
}

使用(局部引用需要加上 ak 属性)

<div class="map">
  <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
  <baidu-map class="bmView" :scroll-wheel-zoom="true" :center="location" :zoom="zoom" @click="getLocationPoint" ak="YOUR_APP_KEY">
    <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
    <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
  </baidu-map>
</div>

注意点：(地图需要显示的定义高度)

BmView 是用于渲染百度地图实例可视化区域的容器，通常与 LocalSearch 等会输出其它视图的组件结合使用
BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内
没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当 center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值
由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

百度地图开发平台 jsAPI：百度地图 jsAPI
vue-baidu-map 文档：vue-baidu-map 文档
高德地图 vue-amap 文档：高德地图文档

搜索是利用 bm-local-search 来进行搜索，这个不知道是不是因为我外层用了固定定位，导致我在输入框中输入位置后，就把地图给覆盖了，没有做到官方文档那种，然后我就用了 display: none 来隐藏这个容器

<div class="map">
  <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
  <!-- 给地图加点击事件 getLocationPoint，点击地图获取位置相关的信息，经纬度啥的 -->
  <!-- scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放，zoom 是视图比例 -->
  <baidu-map
    class="bmView"
    :scroll-wheel-zoom="true"
    :center="location"
    :zoom="zoom"
    @click="getLocationPoint"
    ak="YOUR_APP_KEY"
  >
    <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
    <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
  </baidu-map>
</div>

data() {
    return {
      location: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 12.8,
      addressKeyword: "",
    };
},
methods: {getLocationPoint(e) {
      this.lng = e.point.lng;
      this.lat = e.point.lat;
      /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder();
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.selectedLng = point.lng;
        this.selectedLat = point.lat;
      });
      /* 利用坐标获取地址的详细信息 */
      geocoder.getLocation(e.point, res=>{console.log(res);
      },
}

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯 ^_^）

往期推荐：
- 实现单行及多行文字超出后加省略号
- 判断 iOS 和 Android 及 PC 端
- 使用 vue 开发移动端管理后台
- 画三角形

vue项目中使用百度地图vuebaidumap

1. 引入方式

2. 搜索