智一面gtalent-【无敌干货】vue中高德地图这样用也可以？

这么好的模拟笔试题上哪找啊，快来戳我磨刀吧！

在一些简单的大屏类展示应用/网页中，经常会用到地图相关的展示场景，除了一些特殊的三维场景需要用 Gis/BIM 或者 WebGL，一些简单的业务就可以直接使用高德地图或者百度地图来完成。

接下来讲在 Vue 项目中高德地图 JavaScript API 的引用方式以及一些简单的 API 的使用。

演示项目使用 vue cli 4.0 脚手架搭建项目。

1. 引用

在高德地图发布 2.0 版本之前，通常只能以两种通用的方式加载，一种是直接在 public/index.html 的头部直接添加 script 标签，另一种则是在需要的时候异步加载，并传入回调函数。

1.1 index.html 直接添加

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

这种是会在页面加载前先下载高德地图的JavaScript文件，并在 window 对象下创建一个 AMap 对象。

1.2 vue.config.js 引入

module.exports = {
    // ...
    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;
            }
            if (process.env.NODE_ENV === "development") {
                args[0].cdn = cdn;
            }
            return args;
        })
    },
    configureWebpack: function(config) {
        config.externals = {
        	AMap: "AMap"
        }
    }
}

这种方式与直接在 public/index.html 中引入类似，开发和发布生产环境的时候，都会在入口页面头部插入对应的地址。

1.3 异步引入

异步引用的方式可以减少首页渲染的时间，但是如果需要直接在主页面加载时就渲染地图的话，性能没有什么提升。

编写异步加载方法

首先在 src/utils/ 下创建一个加载文件 remoteLoadAMap.js。

export function loadAMap(key, loadUI = true, version = "2.0") {
    return new Promise((resolve, reject) => {
        if (!key) {
            throw new Error("key不能为空");
        }
        if (window.AMap) {
            return resolve(window.AMap);
        }
        const src = `https://webapi.amap.com/maps?v=${version}&key=${key}&callback=onAMapLoad`;
        const script = document.createElement("script");
        script.onerror = () => {
          return reject();
        };
        script.src = src;
        document.head.appendChild(script);
        window.onAMapLoad = async () => {
            if (loadUI) {
                await loadAMapUI();
            }
            resolve(window.AMap);
        }
    })
}

export function loadAMapUI() {
	return new Promise((resolve, reject) => {
        if (window.AMapUI) {
            return resolve(window.AMapUI);
        }
        const script = document.createElement("script");
        script.src = "https://webapi.amap.com/ui/1.1/main.js";
        document.head.appendChild(script);
        script.onload = () => {
            return resolve(window.AMapUI);
        };
        script.onerror = () => {
            return reject();
        };
    });
}

1.4 官方 loader 加载

在高德地图发布 v 2.0 之后，也提供了一个 JSAPI Loader 用来异步加载 AMap.js 。

推荐使用

1.4.1 安装

npm install @amap/amap-jsapi-loader --save
// or
yarn add @amap/amap-jsapi-loader --save

1.4.2 使用

在 AMap.vue 文件的 script 部分直接引入并初始化。

import AMapLoader from '@amap/amap-jsapi-loader';

export default {
    name: "AMap",
    beforeCreate() {
        AMapLoader.load({
            "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "1.4.15",    // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": [],          // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI，缺省不加载
            	"version": '1.1',   // AMapUI 缺省 1.1
            	"plugins":[]        // 需要加载的 AMapUI ui插件
            },
            "Loca": {               // 是否加载 Loca， 缺省不加载
            	"version": '1.3.2'  // Loca 版本，缺省 1.3.2
            }
        }).then( AMap => {
            this.$nextTick(() => this.initMap(AMap));
        }).catch(e => {
        	console.error(e);
        })
    },
    methods: {
        initMap(AMap) {
            this.map = new AMap.Map("container");
            // 或者使用 $refs 获取节点
            // this.map = new AMap.Map(this.$refs.container);
        }
    }
}

不论哪种方式，最终都会在 window 对象下添加一个对象属性 AMap

2. 使用

在初始化之前需要确保 amap.js 已经加载完成。建议先判断 window 下是否已经有 AMap 属性。

2.1 初始化地图实例

// template
<div class="amap" ref="map-container"></div>

// script
<script>
window.AMap && (const map = new window.AMap.Map(this.$ref["map-container"]));
</script>

2.2 异步加载地图插件

除了在初始化地图的时候直接预加载插件之外，也可以在需要调用插件的地方异步加载插件。

a. 同步预加载插件

可以在引用高德地图api的时候直接在地址后用参数的形式传入需要用到的插件名称。

// 1. public.html
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.ToolBar,AMap.Driving"></script>

// 2. AMapLoader
<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
    name: "AMap",
    beforeCreate() {
        AMapLoader.load({
            "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "1.4.15",    // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": [],          // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI，缺省不加载
            	"version": '1.1',   // AMapUI 缺省 1.1
            	"plugins":["AMap.ToolBar", "AMap.Driving"]        // 需要加载的 AMapUI ui插件
            },
            "Loca": {               // 是否加载 Loca， 缺省不加载
            	"version": '1.3.2'  // Loca 版本，缺省 1.3.2
            }
        }).then( AMap => {
            this.$nextTick(() => this.initMap(AMap));
        }).catch(e => {
        	console.error(e);
        })
    },
    methods: {
        initMap(AMap) {
            this.map = new AMap.Map("container");
            // 或者使用 $refs 获取节点
            // this.map = new AMap.Map(this.$refs.container);
        }
    }
}
</script>

b. 异步加载插件

高德地图的 AMap 的原型上提供了异步加载插件的方法 AMap.plugin()。

AMap.plugin 接收两个参数，第一个参数为需要加载的插件名称或者插件名称组成数组，第二个参数为加载完成后执行的回调函数。

var map = new AMap.Map('container',{
    zoom:12,
    center:[116.39,39.9]
});

// 单个插件
AMap.plugin('AMap.ToolBar',function(){//异步加载插件
    var toolbar = new AMap.ToolBar();
    map.addControl(toolbar);
});

// 多个插件
AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
    var toolbar = new AMap.ToolBar();
    map.addControl(toolbar);
    var driving = new AMap.Driving();//驾车路线规划
    driving.search(/*参数*/)
});

c. 可用插件列表

2.3 地图生命周期

1. 创建：const map = new AMap.Map("container")

2. 创建完成，加载地图资源，会触发 complete 事件：map.on("complete", () => {})

3. 销毁：map.destroy() ，执行后会销毁地图对象，释放内存

3. Map

地图对象类，封装了地图的属性设置、图层变更、事件交互等接口的类。

参数和方法详情见AMap.Map

3.1 参数

const map = new AMap.Map(div: (String | HTMLDivElement), opts?: MapOptions);

1. div ：当参数类型为 String 时，内部会查找对应 id 等于该参数值的 dom 节点。

2. opts ：MapOptions 地图初始化参数。

opts:MapOptions 主要参数如下：

3.2 方法

3.3 事件