vue调用百度地图

1.申请百度开发者平台账号，然后获取到ak，链接百度地图开发者平台

点击控制台，在我的应用里面添加自己的ak

必须输入名字，选择你要使用地图的模式，我选的是浏览器，之后需要在白名单力添加数据，你可以直接写 * 号 这样就允许所有的访问

// 首先下载百度地图

npm install vue-baidu-map --save

在vue项目中创建vue.config.js。在里面写

module.exports = {
  configureWebpack: {
    externals: {
      'BMap': 'BMap' // 百度地图配置
    }
  }
}

再main.js中编写一下代码

import Vue from 'vue'
import App from './App'
// 引入百度地图
import BaiduMap from 'vue-baidu-map'

Vue.config.productionTip = false
// 使用百度地图，并配置自己的 ak
Vue.use(BaiduMap,{ak:'eUqqLe0ys8mbhe6S9dEm9o12y.......'})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

自己新建一页面放入下面的代码

<template>
    <div class="dv" id="allmap"></div> 
</template>

<script>

import HelloWorld from './components/HelloWorld'
export default {
    name: 'pm-distribution',
    components: {
      
    },
    mounted() {
    // 获取位置信息
    this.getCity();
  },
  methods: {
    getCity() {
      var map = new BMap.Map("allmap");
      var point = new BMap.Point(116.331398,39.897445);
      map.centerAndZoom(point,12);
      var geoc = new BMap.Geocoder();    
      map.addEventListener("click", function(e){        
          var pt = e.point;
          geoc.getLocation(pt, function(rs){
              var addComp = rs.addressComponents;
              alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
          });        
      });
      function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
        // alert("当前定位城市:"+cityName);
      }
      var myCity = new BMap.LocalCity();
      myCity.get(myFun); 
          }
  }
}
</script>

<style>
.dv { width: 100%; height: 500px; }
</style>

展示的效果如下