在vue中使用高德地图（异步引入方式）

问题来源

项目需要是使用到地图，并不是所有页面都用到，所以采用异步加载当时引入地图

开始

在vue项目目录下创建plugins文件夹，并在里面创建amap.js 文件

/*
 * 异步创建script标签 
 */
export default function MapLoader (key) { 
  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=' + key
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

– 使用

<template>
  <div class="test">
    <div id="container" style="height:300px;width:300px;"></div>
  </div>
</template>
<script>
import MapLoader from '@/plugins/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", {
        resizeEnable: true
      });
    }, e => {
      console.log('地图加载失败' ,e)
    })
  }
}
</script>

– 结束
在项目的任何位置都可以这样使用地图了，还可以安全的使用地图提供的各种服务。