做网站注意设么网站开发思维导图

做网站注意设么,网站开发思维导图,网站做内嵌,深圳游戏网站开发记录一下#xff0c;大部分也是ai写的 注意的是#xff0c;逆地理编码需要用的key是web服务端的#xff0c;所以得重新申请一个key 意外的是#xff0c;我在官方的文档里面运行#xff0c;用我自己的key#xff0c;不好使。(官方直接调用逆地理编码的那个方法就可以)大部分也是ai写的注意的是逆地理编码需要用的key是web服务端的所以得重新申请一个key意外的是我在官方的文档里面运行用我自己的key不好使。(官方直接调用逆地理编码的那个方法就可以)这个没好使。但又找到了一个调用地址调用这个地址用自己的key好使我没理解为什么。https://restapi.amap.com/v3/geocode/regeo?outputjsonlocation${lng},${lat}key${amapKey}radius1000extensionsalltemplate el-dialog :close-on-click-modalfalse :visible.syncdialogVisible append-to-body title扫码地图 width1000px !-- 地图容器 -- el-amap refmap :centercenter :zoomzoom classamap-demo vidamapDemo clickhandleMapClick inithandleMapInit !-- 点击位置标记修复图标配置 -- el-amap-marker v-ifselectedPosition.lng selectedPosition.lat :position[selectedPosition.lng, selectedPosition.lat] :draggabletrue dragendhandleMarkerDragEnd /el-amap-marker /el-amap !-- 底部位置信息 -- div classposition-info span所选位置{{ selectedPosition.address || 请点击地图选择位置 }}/span /div !-- 底部按钮 -- div slotfooter classdialog-footer el-button clickdialogVisible false取消/el-button el-button :disabled!selectedPosition.lng typeprimary clickhandleConfirm确定/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?outputjsonlocation${lng},${lat}key${amapKey}radius1000extensionsall; 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 langscss 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