使用的是vue-cli4,首先去高德地图获取你的key。
第一步
在vue.config.js中配置
module.exports = {
configureWebpack: {
externals: {
'AMap': 'AMap'
}
}
}
第二步
在public目录下的index.html中添加(写在body里面)
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
第三步
在你写的组件中创建(记得写宽高)
<div id="container" style="width: 100%;height: 100%">
引入
import AMap from 'AMap';
在methods中初始化
initMap: function() {
this.map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
mapStyle: "amap://styles/darkblue"
});
},
在mounted中调用
mounted() {
this.initMap();
},
然后就成功啦