最近作高德開發,須要引入高德的js,可是 說實話 高德官方的文檔不知道大佬們有沒有看懂,反正我是沒看懂,寫的都什麼鬼?我怎麼引都引入不了,無可奈何想到了以下方法:web
export default function remoteLoad (url, hasCallback) { return createScript(url) /** * 建立script * @param url * @returns {Promise} */ function createScript (url) { var scriptElement = document.createElement('script') document.body.appendChild(scriptElement) var 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) } }
針對全部問題,將該文件放置於utils文件夾下api
目標頁面:promise
import remoteLoad from "@/utils/remoteLoad.js"; async created() { // 已載入高德地圖API,則直接初始化地圖 // console.log(this.AMap,window.AMap) if (window.AMap && this.AMap){ this.initMap(); // 未載入高德地圖API,則先載入API再初始化 } else { await remoteLoad( `https://webapi.amap.com/maps?v=1.4.10&key=${MapKey}&plugin=AMap.DistrictSearch` ); await remoteLoad('https://a.amap.com/jsapi_demos/static/citys.js') this.initMap(); }
至此已經作到引入js而且初始化地圖。具體想封裝成組件仍是直接在頁面使用都是能夠的,並且只加載一次,避免了反覆引入的問題,感謝大佬觀看app