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

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

可在app.js中全局引入

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  /* 需要注册百度地图开发者来获取你的ak */
  ak: 'YOUR_APP_KEY'
})

也可以在引入min.js中引入

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

也可以局部引入，组件需在node_modules/vue-baidu-map/components里面找，局部引入要在中声明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
  },
}

下面是具体代码

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

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

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);
      },
}

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