加载第三方插件处理(高德地图为例)
remoteLoad.js
export default function remoteLoad (url, hasCallback) {
return createScript(url)
/**
* 创建script
* @param url
* @returns {Promise}
*/
function createScript (url) {
console.log(url, '地址')
let scriptElement = document.createElement('script')
document.body.appendChild(scriptElement)
let promise = new Promise((resolve, reject) => {
scriptElement.addEventListener('load', e => {
removeScript(scriptElement)
if (!hasCallback) {
resolve(e)
}
}, false)
scriptElement.addEventListener('error', e => {
removeScript(scriptElement)
reject(e)
}, false)
if (hasCallback) {
window.____callback____ = function () {
resolve()
window.____callback____ = null
}
}
})
if (hasCallback) {
url += '&callback=____callback____'
}
scriptElement.src = url
return promise
}
/**
* 移除script标签
* @param scriptElement script dom
*/
function removeScript (scriptElement) {
document.body.removeChild(scriptElement)
}
}
map.vue
import remoteLoad from '@/utils/remoteLoad.js'
async created () {
// 已载入高德地图API,则直接初始化地图
if (window.AMap && window.AMapUI) {
this.main() // 此函数是加载map等初始化处理
// 未载入高德地图API,则先载入API再初始化
} else {
await remoteLoad(`https://webapi.amap.com/maps?v=1.4.15&key=${this.MapKey}`) // MapKey只是你的key值
await remoteLoad('http://webapi.amap.com/loca?v=1.3.2&key=' + this.MapKey)
await remoteLoad('http://a.amap.com/Loca/static/mock/districts.js')
this.main()
}
}