高德地图及其高德相关UI库的使用

原创

于 2023-10-21 21:25:13 发布 · 704 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #arcgis #高德地图

本文介绍了在2021年12月之后申请的高德地图API使用中，如何设置安全密钥并配合JavaScriptAPI进行异步加载和AmapUI组件库的集成，包括script标签引入和npm方式的VueAMap示例。

注意:**安全密钥设置之后再加载地图**
https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode

在2021年12月02日以后申请的key需要配合您的安全密钥一起使用。且安全密钥需设置在key之前

```javascript
<script type="text/javascript">
  window._AMapSecurityConfig = {
  serviceHost:'您的代理服务器域名或地址/_AMapService',  
  // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>```


引入高德地图的方式:
   https://lbs.amap.com/api/javascript-api-v2/getting-started

1:script标签引入
2:npm 引入

对于的，当我们需要使用到地图的一些特殊功能的时候，如拖拽

那么需要结合AmapUi组件库去实现
 Amap UI组件库 的引入方式
1:若map引入是通过script的方式引入的，
那么 amap的引入也需要通过script的方式引入

引入方式:https://lbs.amap.com/api/amap-ui/intro
注意:异步的引入方式 一定要注意初始化部分  异步引入initAMapUI()必不可少

```javascript
<!--异步加载 高德地图JSAPI ，注意 callback 参数-->
<script src="//webapi.amap.com/maps?v=2.0&key=您申请的key值&callback=my_init"></script>

<!--引入UI组件库异步版本main-async.js（1.1版本） -->
<script src="//webap