1.新建baiduMap
export function baiduMap(ak) {
return new Promise(function(resolve, reject) {
window.baiduMap = function() {
resolve()
}
var script = document.createElement(‘script’)
script.type = ‘text/javascript’
script.src = `http://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=baiduMap`
script.onerror = reject
document.head.appendChild(script)
})
}
2.配置vue.config.js
externals: {
BMap: ‘BMap’
}
3.实例化
<template>
<div id=“map”></div>
</template>
<script>
import { baiduMap } from ‘@/tools/baiduMap’
export
default {
data() {
return {
ak: ‘xxxxxx’
}
},
mounted() {
// 动态引入较大类库避免影响页面展示
this.$nextTick(() => {
let _this = this;
baiduMap(_this.ak).then((mymap) => {
// 创建地图实例
let map = new BMap.Map(“map”);
let point = new BMapGL.Point(119.949506, 29.089524);
map.centerAndZoom(point, 10); //设置缩放级别
});
};
}
};
</script>
