Vue 引入高德地图 vue-amap

一、在高德开发平台，获取Key（已有可跳过）；

高德开发者平台—链接地址

1、控制台——我的应用——创建应用——添加key

 创建应用

 新建应用

 

 选择web端（JS平台）

 last：到这里的 key 就有了，还得到了一个安全密钥；

 二、引入vue-amap

1、安装

npm install -S vue-amap

 2、在 main.js 里引入

其中更多的插件，请参考： 插件的使用-入门-教程-地图 JS API | 高德地图API (amap.com)

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
 // 初始化高德地图的 key 和插件
VueAMap.initAMapApiLoader({
  key: "这里填写自己的key", // "key"
  plugin: [
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', // 地图鹰眼插件
    'AMap.MapType', // 地图类型切换插件，可用于切换卫星地图
    'AMap.PolyEditor', // 多边形编辑器，绘制和编辑折现
    'AMap.CircleEditor', // 圆编辑插件
    'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置
    'AMap.Geocoder' // 逆地理编码,通过经纬度获取地址所在位置详细信息
    // 按实际需求添加插件
  ],
  v: '1.4.4', // amap版本（默认1.4.4）
  // uiVersion: '1.0' // 地图ui版本（忽略，就是不配置）
});

//高德的安全密钥
window._AMapSecurityConfig = {
	securityJsCode:"这里填写得到的安全密钥" // "安全密钥",
}

3、HTML部分：编写容器

4、Script 部分：

引入 AMapManager

import { AMapManager } from "vue-amap";

5、Style部分（自己根据实际场景调试）

>

 最后的效果图：

附官方文档：准备-入门-教程-地图 JS API|高德地图API (amap.com)

文章是一个测试demo；希望大家积极指出文章中的不足之处，有经验的小伙伴，也可以把你的见解分享出来；