VUE 项目接入百度地图api，根据经纬度显示地图位置，点击地图获取经纬度申请百度地图秘钥ak 申请地址： http:

申请百度地图秘钥ak 申请地址： lbsyun.baidu.com/apiconsole/…
安装插件

npm install vue-baidu-map --save

项目中应用全局引入方式 main.js

import Vue from 'vue';
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
    ak: '你的ak'
})

局部引入方式 index.vue

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
export default {
  components: {
    BaiduMap,
    BmMarker
  }
};

<baidu-map class="bmView" :scroll-wheel-zoom="true" :center="location" :zoom="zoom" @click="getLocationPoint" ak="你的ak">
  <!--标记-->
  <bm-marker :position="location" :dragging="true">
  </bm-marker>
</baidu-map>

index.css

.bmView {
  width: 100%;
  height: 400px;
}

model.js

let Model = {
    data() {
        return {
            Model: {
              baiduLongitude:''
              baiduLatitude:''
            },
            location: {
                lng: 116.404,
                lat: 39.915
            },
            zoom: 18
        }
    }
}

controll.js

//点击地图获取经纬度
getLocationPoint(e) {
  let point = e.point;
  this.Model.baiduLongitude = point.lng;
  this.Model.baiduLatitude = point.lat;
  this.location.lng = point.lng
  this.location.lat = point.lat
}

效果预览