VueAmap

# 异步加载

当想要使用 AMap 对象时，我们为您提供了异步加载的方式， 在要使用 AMap 对象的组件中按以下方式引入，我们提供了 amapLoader 这个 Promise 对象，通过异步回调的方式得到 AMap 对象

全局引入

您可以在入口文件中全局引入，并将其绑定到 vue 上

WARNING

由于 AMap 是基于 Promise 异步引入的，因此，如果你在第一时间内访问 this.$AMap 获取 AMap 对象时，可能为 undefined 。 此时，需要适当的调整你代码执行的时机，例如将要执行的代码放入 $nexTick 中

main.js

import { amapLoader } from 'amap'
import Vue from 'vue'
amapLoader.then( AMap => Vue.prototype.$AMap = AMap)

要引入的组件

<script>
export default {
  mounted(){
      this.$nextTick(()=>{
        console.log(this.$AMap)
        // code 
      });
  }
}
</script>

局部引入

您也可以在单独的组件中引入，示例如下

<script>
import { amapLoader } from 'amap'
export default {
  mounted(){
    amapLoader.then(AMap => {
      // code
      console.log(AMap)
    })
  }
}
</script>

# 同步加载

  1. 第一步，在 public/index.html 中引入
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值""></script>
  2. 第二步：更改你的 webpack 配置
  • 如果是用vue-cli3搭建的项目 那么你在你的vue.config.js里面加上配置
  module.exports = {
      configureWebpack: config => {
        const externals = {
          AMap: 'window.AMap',
          Loca: 'window.Loca'
        };
        config.externals = { ...config.externals, ...externals };
      },
  }
  • 如果是用 webpack 搭建项目，那么在 webpack.config.js 里加上配置
  module.exports = {
      externals: {
        AMap: 'window.AMap',
        Loca: 'window.Loca'
      },
}
  1. 第三步：在组件中引入高德对象
<script>
import AMap from 'AMap'
export default {
  mounted(){
    var map = new AMap.Map('container', {
        zoom: 4,
        center: [102.342785, 35.312316]
    });
  }
}
</script>

← 地图 →