腾讯地图TMap标记反显，新增标记

功能：

1. 根据省市区获取对于的经纬度，设置为地图的center

2. 如果传入了经纬度，则在地图中反显

3. 根据输入内容，调用接口，获取关联关键字的地址列表，点击列表项后，根据地址经纬度，设置地图的center，并显示选中地址的标记

// index.html<script src="https://map.qq.com/api/gljs?v=1.exp&key=腾讯KEY&libraries=drawing,geometry,autocomplete,convertor"></script>

<template><el-dialog v-model="visible"title="选择位置"width="60%"><div style="margin-bottom: 8px; display: flex; align-items: center; gap: 8px"><el-select v-model="searchKey"filterable remote reserve-keyword placeholder="搜索地址/关键字，按回车搜索"@change="handleSelect":remote-method="remoteMethod":loading="loading"value-key="address"style="width: 240px"><el-option v-for="(item, index) in options":key="index":label="item.address":value="item"><div style="display: flex; align-items: center; gap: 4px"><span>{{item.address}}</span><!--<span style="color: var(--el-text-color-secondary)">{{item.latitude.toFixed(6)}},{{item.longitude.toFixed(6)}}</span>--></div></el-option></el-select><div style="margin-left: 12px"><div><span style="color: var(--el-text-color-secondary)">坐标</span>:<strong v-if="selected.lat">{{selected.lat.toFixed(6)}},{{selected.lng.toFixed(6)}}</strong><span v-else>未选中</span></div><!--<div style="max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">地址:{{selected.address||'无'}}</div>--></div></div><div ref="mapContainer"style="width: 100%; height: 520px; border: 1px solid #eee"></div><template #footer><div style="text-align: right"><el-button @click="handleCancel">取消</el-button><el-button type="primary":disabled="!selected.lat"@click="handleConfirm">确认</el-button></div></template></el-dialog></template><script setup lang="ts">import{ref,reactive,computed,nextTick,onBeforeUnmount,watch}from'vue';import{ElMessage}from'element-plus';importtype{PropType}from'vue';import{getGeocoder,GetSuggestion}from'/@/api/store';constprops=defineProps({modelValue:{type:ObjectasPropType<{lat?:number;lng?:number;address?:string}>,default:()=>({}),},initZoom:{type:Number,default:15},});constemit=defineEmits(['update:modelValue','confirm','cancel']);constoptions=ref<{address:string;latitude:number;longitude:number}[]>([]);constvisible=ref(false);constmapContainer=ref<HTMLDivElement|null>(null);constmapInstance:any=ref(null);// 地图实例constmarker:any=ref(null);// 地图上的 marker 实例// let geocoder: any = null; // 地图上的 geocoder 实例constsearchKey=ref({});constselected=reactive({lat:0asnumber|null,lng:0asnumber|null,address:''});constloading=ref(false);constremoteMethod=(query:string)=>{console.log('🚀 ~ remoteMethod ~ query:',query);if(query){loading.value=true;if(!mapInstance.value){ElMessage.error('地图尚未初始化');return;}try{GetSuggestion({keyword:query}).then((res:any)=>{console.log('🚀 ~ remoteMethod ~ res:',res);if(res.data&&res.data.result){options.value=res.data.result;console.log('🚀 ~ remoteMethod ~ options.value:',options.value);}else{ElMessage.error('地址解析失败，未返回有效坐标');}}).finally(()=>{loading.value=false;});}catch(e){console.error('getLocation error',e);ElMessage.error('搜索失败');}}else{options.value=[];}};functionhandleSelect(){console.log('111111111111111',searchKey.value);// selectNow.value = selectNow.value.address;selected.address=searchKey.value.address;selected.lat=searchKey.value.latitude;selected.lng=searchKey.value.longitude;nextTick(()=>{addMarker(newTMap.LatLng(selected.lat,selected.lng));// mapInstance.value.clearMarkers(); // 清除之前的标记mapInstance.value.setCenter(newTMap.LatLng(selected.lat,selected.lng));});}functionopenDialog(data:any){console.log('searchKey111111111111111',searchKey);searchKey.value={};options.value=[];visible.value=true;initMap(data);}constTMap=(windowasany).TMap;// 初始化地图asyncfunctioninitMap(data:any){console.log('🚀 ~ initMap ~ data:',data);awaitnextTick();if(!TMap){ElMessage.error('未检测到腾讯地图 SDK，请确认已在 index.html 中引入');return;}letdefaultCenter:any;// 1. 确定中心点坐标if(!data.lat&&!data.lng&&data.address){console.log('适配：使用地址解析');// 调用地址解析接口，根据地址获取坐标try{constres:any=awaitgetGeocoder({address:data.address});if(res.data&&res.data.result){defaultCenter=newTMap.LatLng(res.data.result.latitude,res.data.result.longitude);}else{ElMessage.error('地址解析失败，未返回有效坐标');return;}}catch(error){console.error('地址解析出错',error);ElMessage.error('地址解析出错');return;}}elseif(data.lat&&data.lng){console.log('直接使用传入的经纬度');defaultCenter=newTMap.LatLng(data.lat,data.lng);}else{// 如果既没有坐标也没有地址，设置一个默认中心点（例如北京）defaultCenter=newTMap.LatLng(39.98412,116.307484);}// 2. 初始化或更新地图if(!mapInstance.value){// 首次初始化mapInstance.value=newTMap.Map(mapContainer.valueasHTMLElement,{center:defaultCenter,zoom:props.initZoom,});}else{// 如果地图实例已存在，先清理旧的标记，再更新中心点和缩放级别if(marker.value){marker.value.setMap(null);marker.value=null;}mapInstance.value.setCenter(defaultCenter);mapInstance.value.setZoom(props.initZoom);}// 3. 绑定点击事件（每次重新绑定确保逻辑最新）// 注意：腾讯地图的 on 方法通常会覆盖之前的同名事件监听，但为了保险起见，先 off 再 onconsole.log('🚀 ~ initMap ~ mapInstance.value:',mapInstance.value);// mapInstance.value.off('click');mapInstance.value.on('click',(e:any)=>{addMarker(e.latLng);});// 4. 如果有初始坐标，添加标记if(data.lat&&data.lng){addMarker(newTMap.LatLng(data.lat,data.lng));}}functionaddMarker(latLng:any){// 如果已存在marker，则先移除if(marker.value){marker.value.setMap(null);marker.value=null;}selected.lat=latLng.lat;selected.lng=latLng.lng;// 创建新的markermarker.value=newTMap.MultiMarker({map:mapInstance.value,styles:{// 定义marker样式marker:newTMap.MarkerStyle({width:25,height:35,anchor:{x:12.5,y:35},}),},geometries:[{position:latLng,id:'marker1',},],});}functionhandleConfirm(){constpayload={lat:selected.latasnumber,lng:selected.lngasnumber};emit('update:modelValue',payload);emit('confirm',payload);visible.value=false;}functionhandleCancel(){// 还原为父级传入值if(props.modelValue&&props.modelValue.lat&&props.modelValue.lng){selected.lat=props.modelValue.lat;selected.lng=props.modelValue.lng;selected.address=props.modelValue.address||'';}else{selected.lat=null;selected.lng=null;selected.address='';}emit('cancel');searchKey.value={};visible.value=false;}onBeforeUnmount(()=>{try{constTMap=(windowasany).TMap;if(TMap&&TMap.maps&&mapInstance){mapInstance.value.off('click');searchKey.value={};options.value=[];}}catch(error){console.error('地图销毁出错',error);}});defineExpose({openDialog,});</script><style scoped>.location-picker{display:flex;align-items:center;}</style>