今天在重構(gòu)公司項(xiàng)目的時(shí)候遇到一個(gè)需求，之前的項(xiàng)目使用的是angularjs，里面有用到高德地圖插件，解決方案非常傳統(tǒng)：將高德地圖通過cdn的形式引入到項(xiàng)目的index.html文件中，然后即可全局調(diào)用AMap。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xxxxx系統(tǒng)</title>
<meta name="renderer" content="webkit"/>
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="http://webapi.amap.com/maps?v=1.3&key=ourappkey" defer
type="text/javascript"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
現(xiàn)在遷移到vue，有幾個(gè)問題不得不考慮：
- 項(xiàng)目中其實(shí)只有幾處需要用到地圖，并不需要全局引入
- 在index文件中引入js會明顯拖慢首屏加載速度，雖然可以使用異步加載script的方式解決，但是始終覺得不夠優(yōu)雅。
于是開始各尋找解決方案。
最先找到的是餓了么前端團(tuán)隊(duì)封裝的vue-amap，剛開始還是挺滿意的，文檔也非常漂亮，直到。。。直到我發(fā)現(xiàn)這個(gè)封裝其實(shí)還是比較簡單的，并沒有覆蓋到我的需求，比如高德地圖的mouseTool等插件等，導(dǎo)致我不得不忍痛放棄，尋找新的解決方案。而且，除了高德官方文檔之外，你不得不再次查找vue-amap文檔，看是不是你的語法哪里出了問題。orz =3
然后繼續(xù)找，突然在segmentfault上看到一篇文章： vue.js 高德地圖，受作者的啟發(fā)，在他的代碼上做了一次封裝，解決異步加載高德地圖的問題。ps: 這種方法其實(shí)也可以用來在vue中加載任何第三方插件。原作者寫于2016年，代碼實(shí)現(xiàn)比較復(fù)雜，而且在開啟了eslint的情況下，會報(bào)錯(cuò)。
開始表演：
1. 創(chuàng)建一個(gè)AMap.js,路徑'src/assets/js/AMap.js'
內(nèi)容如下：
// src/assets/js/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.3&callback=initAMap&key=yourkey'
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}
2. 在任何.vue文件中使用
// test.vue
<template>
<div class="test">
<div id="container" class="h300 w300"></div>
</div>
</template>
<script>
import MapLoader from '@/assets/js/AMap.js'
export default {
name: 'test',
data () {
return {
map: null
}
},
mounted () {
let that = this
MapLoader().then(AMap => {
console.log('地圖加載成功')
that.map = new AMap.Map('container', {
center: [117.000923, 36.675807],
zoom: 11
})
}, e => {
console.log('地圖加載失敗' ,e)
})
}
}
</script>
3. 完美解決
這樣，我們得到了一個(gè)異步加載的高德地圖插件，不需要在全局引入，也不用擔(dān)心功能不齊全，其他的東西，完全參照高德地圖官方文檔來設(shè)置即可。
結(jié)語： 這種方法其實(shí)可以用來加載任何第三方插件,本文只是以高德地圖為例來說明，而且相對來說更加可控，不受制于封裝，一些舊版本的經(jīng)典js插件在es6項(xiàng)目中使用的過渡更加平滑。
歡迎轉(zhuǎn)載，請注明作者及出處:簡書-simon。個(gè)人水平有限，如有錯(cuò)誤的地方，歡迎大家在評論指出。
相關(guān)資料：
都看到這個(gè)地方了，順手給個(gè)喜歡可好？
tags: vue-amap amap vue 高德地圖 js es6
