注意:**安全密钥设置之后再加载地图**
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'
})