vue cli3.0使用百度地图

1. 申请百度地图ak
2. 在src目录下创建一个js文件，如：map.js，代码如下

export function MP(ak) {
  return new Promise(function (resolve, reject) {
    window.init = function () { 
      resolve(BMap)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://api.map.baidu.com/api?v=2.0&ak=" + ak + "&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

3. 创建一个组件，如BaiMap.vue，代码如下

<template>
  <div id="map"></div>
</template>


 
<script>
import { MP } from '@/map.js'
export default {
  name: 'Map',
  data() {
    return {
      ak: 'yLsbCaOmkTEqL7lcHiFqj3Z49vIb265l',  //此处为申请的百度地图ak
    }
  },
  methods: {},
  mounted() {
    this.$nextTick(function () {
      var _this = this
      MP(_this.ak).then((BMap) => {
        /* eslint-disable */
        // 创建Map实例
        var map = new BMap.Map('map')
        var point = new BMap.Point(121.27757, 31.121707)
        // 初始化地图,设置中心点坐标和地图级别
        map.centerAndZoom(point, 15)
        var marker = new BMap.Marker(point) // 创建标注
        map.addOverlay(marker) // 将标注添加到地图中
        var opts = {
          width: 200, // 信息窗口宽度
          height: 80, // 信息窗口高度
          title: '上海', // 信息窗口标题
        }
        var infoWindow = new BMap.InfoWindow(
          '地址：上海市松',
          opts
        ) // 创建信息窗口对象
        marker.addEventListener('click', function () {
          map.openInfoWindow(infoWindow, point) //开启信息窗口
        })
        //添加地图类型控件
        map.addControl(
          new BMap.MapTypeControl({
            mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
          })
        )
        // 设置地图显示的城市 此项是必须设置的
        map.setCurrentCity('上海')
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)
        /* eslint-enable */
      })
    })
  },
}
</script>
<style scoped>
#map {
  width: 500px;
  height: 260px;
}
</style>

5. 根目录下创建vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      "BMap": "BMap"
    },
  },
 }

6.在需要的地方引入BaiMap.vue组件

<template>
	<div>
	  <bai-map></bai-map>
	</div>
</template>

<script>
import BaiMap from '@/components/common/BaiMap.vue'
export default {
  components: { BaiMap },
}
</script>