vue使用百度地图（vue-baidu-map）（搬砖式操作）

第一步：npm install vue-baidu-map（//百度地图ak直接去百度地图后台注册一个（百度有教程））

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  /* 需要注册百度地图开发者来获取你的ak */
  ak: '自己的百度地图ak'
})

第二步：使用（直接复制代码）

<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-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>//展示城市的下拉菜单
    <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>

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

第三步：去看vue-baidu-map文档
点击去官网文档，不用谢，点个赞就行