a

src/views/recruit/recruitstudentsignup/showMap.vue

@@ -1,19 +1,14 @@
 <template>
   <el-dialog
-    title="家庭地址地图选点"
+    title="家庭地址地图查看"
     append-to-body
     :close-on-click-modal="false"
     v-model="visible"
     width="90%">
     <div style="height: 100%;width:100%">
-      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"
-               class="demo-ruleForm">
-
-        <el-form-item label="家庭地址" prop="homeAddressDetail">
-          <el-input v-model="form.homeAddressDetail" style="width: 100%"></el-input>
-        </el-form-item>
-
-      </el-form>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="家庭地址">{{ form.homeAddressDetail }}</el-descriptions-item>
+      </el-descriptions>
       <div id="container2"></div>
     </div>
   </el-dialog>
@@ -21,36 +16,34 @@
 
 <script setup lang="ts">
 import { ref, reactive, nextTick } from 'vue'
-import { BMPGL } from "@/api/recruit/recruitstudentsignup"
-import { getTypeValue } from "@/api/admin/dict"
+import { loadTiandituMap } from "/@/api/recruit/recruitstudentsignup"
+import { getDicts } from "/@/api/admin/dict"
+import { ElMessage } from 'element-plus'
+import { TIANDITU_TOKEN } from '/@/config/map'
 
 // 表单引用
 const formRef = ref()
 
 // 响应式数据
-const ak = "V0ooaf2RZyEGOkD8UzZB3gvw7pCb0Kx7" // 百度的地图密钥
+const tk = TIANDITU_TOKEN // 天地图的token（在 src/config/map.ts 中配置）
 const visible = ref(false)
 const canSubmit = ref(false)
 const circleShow = ref(false)
 const circle = ref<any>(null)
+const map = ref<any>(null)
 
 // 地址信息
-const address = ref(null)
 const center = reactive({ lng: 0, lat: 0 })
 const dictId = ref("")
-const circleArr = ref<any[]>([])
 
 const form = reactive({
   id: "",
   homeAddressDetail: "",
+  homeLng: 0,  // 家庭地址经度
+  homeLat: 0,  // 家庭地址纬度
   raidus: 0
 })
 
-const rules = {
-  homeAddressDetail: [
-    { required: true, message: '家庭地址不能为空', trigger: ["blur", "change"] }
-  ],
-}
 
 // 初始化
 const init = (row: any) => {
@@ -59,8 +52,11 @@ const init = (row: any) => {
   circleShow.value = true
   form.id = row.id
   form.homeAddressDetail = row.homeAddressDetail
+  // 获取家庭地址的经纬度（如果有的话）
+  form.homeLng = row.homeLng || row.homeLongitude || 0
+  form.homeLat = row.homeLat || row.homeLatitude || 0
   nextTick(() => {
-    getTypeValue("dorm_jw").then((data: any) => {
+    getDicts("dorm_jw").then((data: any) => {
       const arr = data.data
       arr.forEach((e: any) => {
         if (e.label == 'bj') {
@@ -72,26 +68,94 @@ const init = (row: any) => {
           center.lat = e.value
         }
       })
-      BMPGL(ak).then((BMapGL: any) => {
-        // 创建地图实例
-        const map = new BMapGL.Map("container2")
-        // 创建点坐标
-        const point = new BMapGL.Point(center.lng, center.lat)
-        // 初始化地图，设置中心点坐标和地图级别
-        map.centerAndZoom(point, 13)
-        // 开启鼠标滚轮缩放
-        map.enableScrollWheelZoom(true)
-        // 创建地址解析器实例
-        const myGeo = new BMapGL.Geocoder()
-        myGeo.getPoint(form.homeAddressDetail, function (point: any) {
-          if (point) {
-            map.centerAndZoom(point, 16)
-            map.addOverlay(new BMapGL.Marker(point, { title: form.homeAddressDetail }))
-          } else {
-            alert('您选择的地址没有解析到结果！')
+      
+      // 等待对话框渲染完成后再加载地图
+      setTimeout(() => {
+        loadTiandituMap(tk).then((T: any) => {
+          // 清除之前的地图实例（如果存在）
+          if (map.value) {
+            map.value.clearOverLays()
           }
-        }, '北京市')
-      })
+          
+          // 创建地图实例
+          map.value = new T.Map("container2")
+          // 创建点坐标
+          const point = new T.LngLat(center.lng, center.lat)
+          // 初始化地图，设置中心点坐标和地图级别（使用默认矢量地图）
+          map.value.centerAndZoom(point, 13)
+          
+          // 启用地图交互功能
+          map.value.enableDrag() // 启用拖拽
+          map.value.enableScrollWheelZoom() // 启用滚轮缩放
+          map.value.enableDoubleClickZoom() // 启用双击放大
+          map.value.enableKeyboard() // 启用键盘操作
+          
+          // 使用天地图JavaScript API的Geocoder进行地址解析
+          if (form.homeAddressDetail) {
+            // eslint-disable-next-line no-console
+            console.log('开始地理编码，地址:', form.homeAddressDetail)
+            
+            // 创建地理编码对象
+            const geocoder = new T.Geocoder()
+            
+            // 进行地址解析
+            geocoder.getPoint(form.homeAddressDetail, (result: any) => {
+              if (result && result.getStatus() === 0) {
+                // 解析成功
+                const location = result.getLocationPoint()
+                // eslint-disable-next-line no-console
+                console.log('地理编码成功:', { lng: location.lng, lat: location.lat })
+                
+                // 将地图中心移动到该位置
+                map.value.centerAndZoom(location, 15)
+                
+                // 添加标记
+                const marker = new T.Marker(location)
+                map.value.addOverLay(marker)
+                
+                // 添加信息窗口
+                const infoWin = new T.InfoWindow()
+                infoWin.setContent(`<div style="padding:12px;max-width:300px;">
+                  <div style="font-size:14px;font-weight:bold;margin-bottom:8px;">📍 家庭地址</div>
+                  <div style="color:#666;margin-bottom:6px;">${form.homeAddressDetail}</div>
+                  <div style="font-size:12px;color:#999;padding-top:6px;border-top:1px solid #eee;">
+                    坐标: ${location.lng.toFixed(6)}, ${location.lat.toFixed(6)}
+                  </div>
+                </div>`)
+                marker.addEventListener('click', function () {
+                  marker.openInfoWindow(infoWin)
+                })
+                
+                // 自动打开信息窗口
+                marker.openInfoWindow(infoWin)
+              } else {
+                // 解析失败，显示学校中心位置
+                // eslint-disable-next-line no-console
+                console.log('地理编码失败，显示学校中心位置')
+                
+                ElMessage.warning('地址解析失败')
+              }
+            })
+          } else {
+            // 没有地址信息
+            const marker = new T.Marker(point)
+            map.value.addOverLay(marker)
+            
+            const infoWin = new T.InfoWindow()
+            infoWin.setContent(`<div style="padding:12px;max-width:300px;">
+              <div style="font-size:14px;font-weight:bold;margin-bottom:8px;">📍 学校位置</div>
+              <div style="font-size:12px;color:#999;">暂无家庭地址信息</div>
+            </div>`)
+            marker.addEventListener('click', function () {
+              marker.openInfoWindow(infoWin)
+            })
+          }
+        }).catch(() => {
+          ElMessage.error('地图加载失败，请检查网络连接或Token配置')
+        })
+      }, 200)
+    }).catch(() => {
+      ElMessage.error('获取地图配置失败')
     })
   })
 }
@@ -109,6 +173,7 @@ defineExpose({
   height: 700px;
   margin: 0;
   font-family: "微软雅黑";
+  margin-top: 15px;
 }
 
 ul li {