vue调用高德地图：vue-amap

骑猪看日落 2021-12-23 10:17 430阅读 0赞

# vue调用高德地图拢共分三步： #

1.去高德开发者平台申请key；
    2.安装vue-amap；
    3.使用组件调用地图

## 1.注册高德开发者账号，申请KEY ##

*  注册完成->找到控制台（右上角）->你会看到下图：

![webp][]

image.png

*  选择你的开发者身份，这里演示个人开发者获取key方法。
 *  按提示走完注册流程即可。
 *  注册完再打开控制台->应用管理->找到“+添加新KEY”->点击会跳出这个弹框：

![webp 1][]

image.png

*  提交之后，你会看到自己的key。

## 2.vue安装vue-amap ##

### npm安装 ###

npm install vue-amap --save

### CDN ###

目前可通过 [unpkg.com/vue-amap][unpkg.com_vue-amap] 获取最新版本的资源。

### main.js引入vue-amap ###

// 引入vue-amap
    import AMap from 'vue-amap';
    Vue.use(AMap);
    
    // 初始化vue-amap
    AMap.initAMapApiLoader({
      // 高德的key
      key: 'YOUR_KEY',
      // 插件集合 （插件按需引入）
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
    });

## 3.组件里调用高德地图 ##

`需要注意：<el-amap>一定要设置宽高，不然地图不会显示。或者给外面套一个div，给div设置宽高也行。`

![webp 2][]

image.png

*  最简单最基本的地图就完成了，如图：

![webp 3][]

image.png

amap里还有很多属性，可以根据自己所需使用(很简单，直接复制粘贴修改一下就好了)，这里不一一作介绍，附上网址可自行查看：  
vue-amap官网：[https://elemefe.github.io/vue-amap/\#/][https_elemefe.github.io_vue-amap]  
高德开放平台：[http://lbs.amap.com/][http_lbs.amap.com]

转载于:https://www.cnblogs.com/SRH151219/p/11087203.html

[webp]: /images/20211223/051860e15fdb475fab308891f1bfa8f2.png
[webp 1]: /images/20211223/9ce2e97ded4a4aff80c9a408df247cb0.png
[unpkg.com_vue-amap]: https://link.jianshu.com/?t=https://unpkg.com/vue-amap/dist/index.js
[webp 2]: /images/20211223/f8d17215053549d683b33eca682505c2.png
[webp 3]: /images/20211223/610fbe2022554150a1fe970d64b03a28.png
[https_elemefe.github.io_vue-amap]: https://link.jianshu.com/?t=https://elemefe.github.io/vue-amap/#/
[http_lbs.amap.com]: https://link.jianshu.com/?t=http://lbs.amap.com/