Vue项目中使用高德地图AMap

[miyuesc]

[pixiv: 20190520]'http://ww1.sinaimg.cn/large/0067sbCSly1g4koqx73w2j30p00ggt98.jpg'

summary_start
近期公司的项目使用到了高德地图api，由于饿了么团队封装的高德地图组件使用起来不是很方便，而且在使用前不仅需要学习vue-amap的文档，也需要学习高德地图的官方文档，使用起来比较麻烦，所以我觉得在项目中直接使用更加方便吧
summary_end

一、引入高德地图js api

第一种方式：直接在index.html页面中引入。

首先，在html中引入api;

    <script src="https://webapi.amap.com/maps?v=1.4.13&key='你自己申请的key'"></script>
    // 这种方式必须在head中引入

第二种方式：在vue.config.js中采用cdn方式引入，这种方式适用于采用打包优化。

    chainWebpack: function(config) {
        config.plugin("html").tap(args => {
            const cdn ={
                css: [],
                js: [
                    "https://webapi.amap.com/maps?v=1.4.13&key='你自己申请的key'",
                    "//webapi.amap.com/ui/1.0/main.js"
                ]
            }
            // 判断环境
            if (process.env.NODE_ENV === "production") {
                args[0].cdn = cdn.build;
            }
            if (process.env.NODE_ENV === "development") {
                args[0].cdn = cdn.dev;
            }
            return args;
        })
    }

第三种方式：异步引入

在项目主目录下新建initmap.js，异步引入高德地图api。

export default function loadMap(key, v = "1.4.14") {
  return new Promise(function(resolve, reject) {
    if (typeof AMap !== "undefined") {
      // eslint-disable-next-line no-undef
      resolve(AMap);
      return true;
    }
    window.onCallback = function() {
      // eslint-disable-next-line no-undef"
      resolve(AMap);
    };
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&callback=onCallback`;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

二、使用

<template>
  <div id="a-map" class="a-map">
  </div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator"
const AMap: any = (window as any).AMap;
@Component
export default class Map extends Vue{
  map: any;
  initMap() {
    this.map = new AMap.Map("a-map", {
      center: [106, 29],
  }
}
</script>
<style></style>

这种方式适用于直接引入api的情况，如果采用异步引入，则需要在vue组件内修改initMap方法

import loadMap from "../../map/load_map";
...
initMap() {
    loadMap(this.key).then(AMap => {
          this.map = new AMap.Map({
            center: this.center,
            zoom: this.zoom
          });
        });
}