今天在重构公司项目的时候遇到一个需求，之前的项目使用的是angularjs，里面有用到高德地图插件，解决方案非常传统：将高德地图通过cdn的形式引入到项目的index.html文件中，然后即可全局调用AMap。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xxxxx系统</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>
现在迁移到vue，有几个问题不得不考虑：
- 项目中其实只有几处需要用到地图，并不需要全局引入
- 在index文件中引入js会明显拖慢首屏加载速度，虽然可以使用异步加载script的方式解决，但是始终觉得不够优雅。
于是开始各寻找解决方案。
最先找到的是饿了么前端团队封装的vue-amap，刚开始还是挺满意的，文档也非常漂亮，直到。。。直到我发现这个封装其实还是比较简单的，并没有覆盖到我的需求，比如高德地图的mouseTool等插件等，导致我不得不忍痛放弃，寻找新的解决方案。而且，除了高德官方文档之外，你不得不再次查找vue-amap文档，看是不是你的语法哪里出了问题。orz =3
然后继续找，突然在segmentfault上看到一篇文章： vue.js 高德地图，受作者的启发，在他的代码上做了一次封装，解决异步加载高德地图的问题。ps: 这种方法其实也可以用来在vue中加载任何第三方插件。原作者写于2016年，代码实现比较复杂，而且在开启了eslint的情况下，会报错。
开始表演：
1. 创建一个AMap.js,路径'src/assets/js/AMap.js'
内容如下：
// 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. 完美解决
这样，我们得到了一个异步加载的高德地图插件，不需要在全局引入，也不用担心功能不齐全，其他的东西，完全参照高德地图官方文档来设置即可。
结语： 这种方法其实可以用来加载任何第三方插件,本文只是以高德地图为例来说明，而且相对来说更加可控，不受制于封装，一些旧版本的经典js插件在es6项目中使用的过渡更加平滑。
欢迎转载，请注明作者及出处:简书-simon。个人水平有限，如有错误的地方，欢迎大家在评论指出。
相关资料：
都看到这个地方了，顺手给个喜欢可好？
tags: vue-amap amap vue 高德地图 js es6
