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

本文介绍了在2021年12月之后申请的高德地图API使用中,如何设置安全密钥并配合JavaScriptAPI进行异步加载和AmapUI组件库的集成,包括script标签引入和npm方式的VueAMap示例。
摘要由CSDN通过智能技术生成
注意:**安全密钥设置之后再加载地图**
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="//webapi.amap.com/ui/1.1/main-async.js"></script>

<script type="text/javascript">
//JSAPI回调入口
function my_init() {
       initAMapUI(); //这里调用initAMapUI初始化
       //其他逻辑
}
</script>

npm 方式引入:

//map通过npm 安装使用
import AMapLoader from "@amap/amap-jsapi-loader";
Vue.use(AMapLoader);

AMapan安装与使用
import VueAMap from 'vue-amap'
Vue.use(VueAMap)

VueAMap.initAMapApiLoader({
	key: '您申请的key值',
	plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch',
		'AMap.Geolocation', 'AMap.Geocoder'
	],
	v: '1.4.4',
	uiVersion: '1.0'
})


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值