1、引用高德地图 SDK
(1)在 public 文件夹下的 index.html 中加入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script>
这个key需要注册申请的,具体的案例还是比较多的。
(2) 在 vue.config.js 文件中配置 externals
module.exports = {
devServer: {
port: 57103 // 端口号配置
},
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
}
}
(3) vue.config.js 文件要自己创建,vue-cli 3.0 不会自动生成此文件。 此外,修改 vue.config.js 不会触发热加载,也就是修改之后你需要重新 run 一下你的项目,它才能生效。
(4)在使用的vue文件当中,需要import AMap
import AMap from 'AMap'
直接使用即可
init () {
let map = new AMap.Map('container', {
center: [116.397428, 39.90923],
resizeEnable: true,
zoom: 10
})
}