记录一下，大部分也是ai写的
注意的是，逆地理编码需要用的key是web服务端的，所以得重新申请一个key
意外的是，我在官方的文档里面运行，用我自己的key，不好使。(官方直接调用逆地理编码的那个方法就可以)，这个没好使。
但又找到了一个调用地址，调用这个地址用自己的key好使，我没理解为什么。https://restapi.amap.com/v3/geocode/regeo?output=json&location=${lng},${lat}&key=${amapKey}&radius=1000&extensions=all
<template> <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" append-to-body title="扫码地图" width="1000px" > <!-- 地图容器 --> <el-amap ref="map" :center="center" :zoom="zoom" class="amap-demo" vid="amapDemo" @click="handleMapClick" @init="handleMapInit" > <!-- 点击位置标记（修复图标配置） --> <el-amap-marker v-if="selectedPosition.lng && selectedPosition.lat" :position="[selectedPosition.lng, selectedPosition.lat]" :draggable="true" @dragend="handleMarkerDragEnd" ></el-amap-marker> </el-amap> <!-- 底部位置信息 --> <div class="position-info"> <span>所选位置：{{ selectedPosition.address || '请点击地图选择位置' }}</span> </div> <!-- 底部按钮 --> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button :disabled="!selectedPosition.lng" type="primary" @click="handleConfirm">确定</el-button> </div> </el-dialog> </template> <script> export default { name: 'SelectMap', data() { return { zoom: 5, // 放大默认层级 center: [104.937478, 35.439575], // 初始中心点 dialogVisible: false, selectedPosition: { lng: '', lat: '', address: '' }, geocoder: null, // 逆地理编码实例 mapInstance: null, // 地图实例 markerInstance: null // 原生Marker实例（备用方案） } }, methods: { /** * 地图初始化完成 */ handleMapInit(map) { this.mapInstance = map; // 初始化逆地理编码（修复城市编码，设为空表示全国） this.geocoder = new AMap.Geocoder({ city: "", // 改为空，避免城市限制导致解析失败 radius: 1000, extensions: 'all' // 增加扩展参数，获取更全地址信息 }); // 自适应地图大小（解决弹窗初始化地图显示问题） setTimeout(() => { map.resize(); }, 100); }, /** * 点击地图事件（修复核心逻辑） */ handleMapClick(e) { try { const { lng, lat } = e.lnglat; // 更新选中位置的经纬度 this.selectedPosition.lng = lng; this.selectedPosition.lat = lat; // 更新地图中心点 this.center = [lng, lat]; // 逆地理编码获取地址 this.getAddressByLnglat(lng, lat); // 【可选】如果vue-amap的marker仍有问题，改用原生Marker // this.createNativeMarker(lng, lat); } catch (error) { console.error('地图点击事件异常：', error); } }, /** * 标记拖动结束事件 */ handleMarkerDragEnd(e) { const { lng, lat } = e.lnglat; this.selectedPosition.lng = lng; this.selectedPosition.lat = lat; this.getAddressByLnglat(lng, lat); }, /** * 逆地理编码：根据经纬度获取地址（修复权限错误） */ async getAddressByLnglat(lng, lat) { const amapKey = this.$mapConfig.gaodeWebServiceKey const url = `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${lng},${lat}&key=${amapKey}&radius=1000&extensions=all`; try { // 注意：需开启跨域（浏览器端需配置Referer白名单） const res = await fetch(url, { method: 'GET', mode: 'cors' // 跨域模式 }); const data = await res.json(); if (data.status === '1' && data.regeocode) { this.selectedPosition.address = data.regeocode.formatted_address; } else { this.selectedPosition.address = `解析失败：${data.info || data.result}`; console.error('高德API返回错误：', data); } } catch (error) { this.selectedPosition.address = `经纬度：${lng.toFixed(6)}, ${lat.toFixed(6)}`; console.error('网络/跨域错误：', error); } }, /** * 【备用方案】创建原生Marker（避免vue-amap兼容问题） */ createNativeMarker(lng, lat) { // 先移除旧标记 if (this.markerInstance) { this.mapInstance.remove(this.markerInstance); } // 创建新标记（使用高德默认图标） this.markerInstance = new AMap.Marker({ position: [lng, lat], map: this.mapInstance, draggable: true }); // 监听原生标记拖动 this.markerInstance.on('dragend', (e) => { const { lng, lat } = e.lnglat; this.selectedPosition.lng = lng; this.selectedPosition.lat = lat; this.getAddressByLnglat(lng, lat); }); }, /** * 打开地图选择弹窗 */ open(initPosition = {}) { this.dialogVisible = true; // 重置选中位置 this.selectedPosition = { lng: '', lat: '', address: '' }; // 如果有初始定位，设置中心点和选中位置 if (initPosition.lng && initPosition.lat) { this.center = [initPosition.lng, initPosition.lat]; this.selectedPosition.lng = initPosition.lng; this.selectedPosition.lat = initPosition.lat; this.getAddressByLnglat(initPosition.lng, initPosition.lat); } else { // 默认显示全国中心 this.center = [104.937478, 35.439575]; } // 延迟确保地图渲染完成 setTimeout(() => { if (this.mapInstance) { this.mapInstance.resize(); } }, 200); }, /** * 确认选择位置 */ handleConfirm() { this.$emit('confirm', { lng: this.selectedPosition.lng, lat: this.selectedPosition.lat, address: this.selectedPosition.address }); this.dialogVisible = false; } }, beforeDestroy() { // 清理地图实例和标记 if (this.markerInstance) { this.mapInstance.remove(this.markerInstance); } if (this.mapInstance) { this.mapInstance.destroy(); } } } </script> <style lang="scss" scoped> .amap-demo { height: 600px; width: 100%; } .position-info { padding: 12px 15px; background-color: #f5f7fa; border-radius: 4px; margin-top: 10px; span { font-size: 14px; color: #606266; line-height: 1.5; } } .dialog-footer { text-align: right; } </style>
