1、在index文件中引入JS
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
2、在vue.config.js中配置
module.exports = {
configureWebpack: {
externals: {
"BMap": "BMap"
}
}
};
3、在页面中使用
<template>
<div class="all">
<div id="allmap" classs="allmap"></div>
</div>
</template>
<script>
import BMap from 'BMap'
export default {
data () {
return {
}
},
methods: {
createMap(){
var that = this;
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
},
mounted () {
this.createMap()
}
}
</script>
<style scoped>
.all{
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0;
left: 0;
}
#allmap{
width: 100%;
height: 100%;
}
</style>