Vue3管理后台项目使用高德地图选点_vue3 地图选点

前言

最近在做的管理后台项目中有一个业务场景是添加门店的地址和经纬度，地址可以输入，但经纬度这样处理却不合适，最好是让用户在地图上搜索或者直接点击获取点的经纬度等详细信息。因为我们的app中使用了高德地图，所以管理后台我也选用高德地图来实现上面的业务需求，下面来看一下具体的使用流程吧。

获取地图Key

• 登录高德开放平台
• 创建应用，添加Key，选择Web端(JS API)，生成Key和安全密钥

引入地图 JSAPI

项目中使用了官方推荐的 JSAPI Loader 来加载地图

• 安装官方 npm 包 @amap/amap-jsapi-loader
• 配置安全密钥（不安全的方式），其它配置方式在这里

<script setup> import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {securityJsCode: '你申请的安全密钥',
}; </script> 
1
2
3

初始化地图

1.创建一个id为mapContainer的div元素
2.调用initMap方法初始化相关地图插件

<script setup> const map = shallowRef(null);
let AMapObj;
function initMap() { AMapLoader.load({ key: '你申请的Key',  version: '2.0&#
1
2