在vue项目中异步使用高德地图AMap

今天在重构公司项目的时候遇到一个需求,之前的项目使用的是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

推荐阅读更多精彩内容