vue.config.js
module.exports = {
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
}
}
loadMap.js
export default function loadMap (key, plugins, v = 'version') {
return new Promise(function (resolve, reject) {
if (typeof AMap !== 'undefined') {
// eslint-disable-next-line no-undef
resolve(AMap)
return true
}
window.onCallback = function () {
// eslint-disable-next-line no-undef
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)
})
}
amap.vue
mounted () {
loadMap(this.key, this.plugins, this.v).then(AMap => {
this.areaMap = new AMap.Map('main', {
center: [121.605575, 31.179352],
zoom: 17,
zooms: [3, 20]
})
this.areaMap.on('complete', () => {
alert('地图加载成功')
})
}).catch(() => {
alert('地图加载失败！')
})
}
