1. 项目引入AMap
vue.config.js
configureWebpack: {
externals: {
'AMap': 'AMap'
}
},
configureWebpack配置中加入AMap项
2. 按需生成script
创建Map.js
export default function Map (key, plugins, v = '版本号') {
return new Promise(function (resolve, reject) {
if (typeof AMap !== 'undefined') {
resolve(AMap)
return true
}
window.onCallback = function () {
resolve(AMap)
}
let script = document.createElement('script')
script.type = 'text/javascript'
script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=onCallback`
script.onerror = reject
document.head.appendChild(script)
})
}
3. 组件中使用
import Map from '@/XXXXX/Map.js'
data () {
return {
areaMap: null,
plugins: [
'AMap.MarkerClusterer',
'AMap.MouseTool',
'AMap.OverView',
'AMap.PolyEditor',
'AMap.RectangleEditor',
'AMap.PlaceSearch',
'AMap.DistrictLayer',
'AMap.CustomLayer'
],
key: '申请的key',
v: '对应版本',
loading: true
}
}
mounted()
loadMap(this.key, this.plugins, this.v)
.then(AMap => {
this.areaMap.on('complete', () => {
successNotice(that, '温馨提示', '地图加载成功！')
this.loading = false
})
}).catch(() => {
this.loading = false
warningNotice(that, '温馨提示', '地图加载失败！')
})
