school-developer/src/views/recruit/recruitstudentsignup/showMap.vue

<template>
  <el-dialog
    title="家庭地址地图查看"
    append-to-body
    :close-on-click-modal="false"
    v-model="visible"
    width="90%">
    <div style="height: 100%;width:100%">
      <el-descriptions :column="1" border class="address-descriptions">
        <el-descriptions-item label="家庭地址">{{ form.homeAddressDetail }}</el-descriptions-item>
      </el-descriptions>
      <div id="container2"></div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
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 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 center = reactive({ lng: 0, lat: 0 })
const dictId = ref("")

const form = reactive({
  id: "",
  homeAddressDetail: "",
  homeLng: 0,  // 家庭地址经度
  homeLat: 0,  // 家庭地址纬度
  raidus: 0
})


// 初始化
const init = (row: any) => {
  visible.value = true
  canSubmit.value = true
  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(() => {
    getDicts("dorm_jw").then((data: any) => {
      const arr = data.data
      arr.forEach((e: any) => {
        if (e.label == 'bj') {
          form.raidus = e.value
          dictId.value = e.id
        } else if (e.label == 'lng') {
          center.lng = e.value
        } else if (e.label == 'lat') {
          center.lat = e.value
        }
      })
      
      // 等待对话框渲染完成后再加载地图
      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('获取地图配置失败')
    })
  })
}

// 暴露方法给父组件
defineExpose({
  init
})
</script>

<style scoped>
#container2 {
  overflow: hidden;
  width: 100%;
  height: 700px;
  margin: 0;
  font-family: "微软雅黑";
  margin-top: 15px;
}

ul li {
  list-style: none;
}

:deep(.address-descriptions .el-descriptions__label) {
  width: 100px !important;
  min-width: 100px !important;
  text-align: center !important;
}
</style>