关于VUE引用百度地图（BMap）

异步加载便于操作

1. src下新建map.js

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

2. 需要用到的页面引入

template 部分

<div id="container"></div>

js部分引入

import { MP } from '../../utils/map.js'
const BMap, map = null
export default {
	data () {
		return {}
	},
	mounted () {
	    MP().then(_ => {
	      BMap = _
	      map = new BMap.Map("container"); // 创建地图实例 
	      map.centerAndZoom("上海", 15); // 根据城市名定位地图中心点
	      map.enableScrollWheelZoom(); // 开启鼠标滑动缩放地图
	    })
	}
}

css一定要设置高度

#container {
  width: 100%;
  height: 100vh;
}

当然还有封装好的

vue-baidu-map

基本也就是组件安装引用那一套 自己翻翻看一看吧