vue脚手架3.0集成百度地图

集成百度地图，找遍所有教程都是需要在webpack.dev.config.js添加什么配置，但是vue3.0的脚手架已经没有这个文件了，所有对于新手前端来说，看的这教程真是心累，后来自己摸索出来，不需要进行配置也可以使用，所有记录一下笔记

第一步
1.cnpm i vue-baidu-map或者npm

2.main.js 引入 ak百度地图密钥

import BaiduMap from 'vue-baidu-map'
// 引入百度地图
Vue.use(BaiduMap, {
  ak: 't0OubpLl9oKT4MZ6COtUhpYHrGjD1f5F'
})

3.index文件，ak是你的密钥

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=t0OubpLl9oKT4MZ6COtUhpYHrGjD1f5F"></script>

4.可以直接用了
需要使用的页面写入标签是固定的，div必须有，样式高度必须有，id必须有

  <baidu-map >
          <div id="allmap"  class="map"/>
 </baidu-map>

5.渲染地图代码

 createMap () {
      // 创建Map实例
      var map = new BMap.Map("allmap")
      // 初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom(new BMap.Point(121.227577, 31.101471), 11)
      //添加地图类型控件
      map.addControl(new BMap.MapTypeControl({
        mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
      }))
      // 设置地图显示的城市 此项是必须设置的
      map.setCurrentCity("上海")
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
    },

6.在vue声明周期钩子函数中 调用，this.$nextick必须有，否则渲染不出来

  this.$nextTick(function() {
      this.createMap();
    })