Vue集成高德地图

高德地图官网：https://lbs.amap.com/

地图jsapi2.0  https://lbs.amap.com/api/jsapi-v2/documentation#pixel

地图jsapi  https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare

示例 https://lbs.amap.com/demo/list/jsapi-v2

高德地图开始之前，我们要拿到一个key才可以。

首先注册账号（https://console.amap.com/dev/index）然后进图应用管理 -> 我的应用 -> 创建新应用 -> 然后添加key 应该就可以了

引入 高德地图相关资源

public/index.html 

//注意（您在2021年12月02日申请以后的key需要配合您的安全密钥一起使用）
 // 一定在上方
// 为了不出问题 版本写成1.4.15（2）

其中
AMap/load_amap_jsapi.js文件 

window._AMapSecurityConfig = {
  securityJsCode:'「您申请的安全密钥」',
}

注意：key和安全密钥要一块儿使用，如果只配置key，可能会有写api用不了 

 引入完成之后，我们可以全局或者随便找个组件打印一下AMap类

 这时候就可以使用了。

先给定一个地图容器（一定要有宽高），给予一个id，在实例化的时候传入的第一个参数就是该容器的id

 下面是我写的一个示例，大家可以参考一下，按需修改

另外一种方式： 

使用vue-amap 一套专门用于vue的高德地图插件

vue-amap参考文档 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install 

1. 安装 

npm install vue-amap -S

2. main.js引入 

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'your amap key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

3. 组件中使用