在vue中使用高德地圖開發，以及AMap的引入？

百度引入BMap ，一個import 即可，可AMap 卻報AMap is not difined ?

1.首先在
externals: {
"BMap": "BMap",
'AMap': 'AMap'
},

2. 其次新建一個AMap.js 引入
   export default function MapLoader () { // <-- 原作者這里使用的是module.exports
   return new Promise((resolve, reject) => {
   if (window.AMap) {
   resolve(window.AMap)
   } else {
   var script = document.createElement('script')
   script.type = 'text/javascript'
   script.async = true
   script.src = 'http://webapi.amap.com/maps?v=1.4.14&callback=initAMap&key='
   script.onerror = reject
   document.head.appendChild(script)
   }
   window.initAMap = () => {
   resolve(window.AMap)
   }
   })
   }

3.在單文件內引入AMap.js
import MapLoader from '@/assets/js/AMap.js'
export default {
name: 'test',
data () {
return {
map: null
}
},
mounted () {
let that = this
MapLoader().then(AMap => {
console.log('地圖加載成功')
var satellite = new AMap.TileLayer.Satellite();
var roadNet = new AMap.TileLayer.RoadNet();
that.map = new AMap.Map('container', {
center: [117.000923, 36.675807],
zoom: 11,
layers:[
satellite,
roadNet
]
})
}, e => {
console.log('地圖加載失敗' ,e)
})
}
}

css 注意給地圖定個高度容器

最后說個題外話： 高德地圖功能比較強大，比如兩點連線問題，直接就可以在官方找到實例，百度上沒找到，也可能文檔不夠詳細吧。
高德地圖衛星圖層有個單詞AMap寫錯了，這個跟大家糾正一下。