1. 在 public 文件夾下的 index.html 中加入
///<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你申請(qǐng)的key"></script>
2. 在 vue.config.js 文件中配置?externals
///module.exports = {
? devServer: {
? ? port: 57103 // 端口號(hào)配置
? },
? configureWebpack: {
? ? externals: {
? ? ? 'AMap': 'AMap' // 高德地圖配置
? ? } }}
注: vue.config.js 文件要自己創(chuàng)建,vue-cli 3.0 不會(huì)自動(dòng)生成此文件。 此外,修改 vue.config.js 不會(huì)觸發(fā)熱加載,也就是修改之后你需要重新 run 一下你的項(xiàng)目,它才能生效。
3.加載地圖

地圖容器要給他一個(gè)寬高。
注:init() 方法請(qǐng)?jiān)?mounted 生命周期中調(diào)用,因?yàn)槿绻?created 階段調(diào)用,會(huì)找不到 html 元素 div#container
注2:若中途遇到?'map' is assigned a value but never used
可找到package.json中找到rules:{} 添加 "no-unused-vars":0
最終效果

高德API:https://developer.amap.com/api/javascript-api/guide/map/map-style