pj_admin_cloud/src/views/test-jsonp.vue

<template>
  <div class="test-jsonp-page">
    <h2>JSONP 跨域测试页面</h2>
    
    <div class="test-section">
      <h3>1. 逆地址解析测试</h3>
      <el-button @click="testReverseGeocode" type="primary">
        测试逆地址解析 (北京天安门)
      </el-button>
      <div v-if="reverseResult" class="result">
        <p><strong>结果:</strong> {{ reverseResult }}</p>
      </div>
    </div>

    <div class="test-section">
      <h3>2. 地址搜索测试</h3>
      <el-input 
        v-model="searchKeyword" 
        placeholder="输入搜索关键词"
        style="width: 300px; margin-right: 10px;"
      />
      <el-button @click="testSearch" type="primary">搜索</el-button>
      <div v-if="searchResults.length > 0" class="result">
        <p><strong>搜索结果:</strong></p>
        <ul>
          <li v-for="(item, index) in searchResults" :key="index">
            {{ item.title }} - {{ item.address }}
          </li>
        </ul>
      </div>
    </div>

    <div class="test-section">
      <h3>3. 地图选择器组件测试</h3>
      <map-select 
        ref="mapSelectRef"
        v-model="selectedLocation"
        placeholder="点击选择位置"
        style="width: 400px;"
      />
      <div v-if="selectedLocation" class="result">
        <p><strong>选中位置:</strong></p>
        <p>地址: {{ selectedLocation.address }}</p>
        <p>坐标: {{ selectedLocation.coordinates }}</p>
      </div>
    </div>

    <div class="logs">
      <h3>日志信息</h3>
      <div class="log-content">
        <div v-for="(log, index) in logs" :key="index" class="log-item">
          {{ log }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElInput, ElMessage } from 'element-plus'
import { TencentMapAPI } from '../utils/jsonp'
import MapSelect from '../components/map/map-select.vue'

// 创建腾讯地图API实例 (启用调试模式)
const mapAPI = new TencentMapAPI('CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA', true)

// 定义类型
interface LocationData {
  address: string
  coordinates: string
  location: {
    lat: number
    lng: number
  }
}

// 响应式数据
const reverseResult = ref('')
const searchKeyword = ref('北京大学')
const searchResults = ref<any[]>([])
const selectedLocation = ref<LocationData | null>(null)
const logs = ref<string[]>([])

// 添加日志
const addLog = (message: string) => {
  const timestamp = new Date().toLocaleTimeString()
  logs.value.unshift(`[${timestamp}] ${message}`)
  if (logs.value.length > 10) {
    logs.value.pop()
  }
}

// 测试逆地址解析
const testReverseGeocode = async () => {
  addLog('开始测试逆地址解析...')
  try {
    // 北京天安门坐标
    const data = await mapAPI.reverseGeocode(39.908823, 116.397470)
    
    if (data.status === 0) {
      reverseResult.value = data.result.address
      addLog(`逆地址解析成功: ${data.result.address}`)
      ElMessage.success('逆地址解析成功')
    } else {
      addLog(`逆地址解析失败: ${data.message}`)
      ElMessage.error('逆地址解析失败')
    }
  } catch (error) {
    addLog(`逆地址解析错误: ${error}`)
    ElMessage.error('逆地址解析错误')
    console.error('逆地址解析错误:', error)
  }
}

// 测试地址搜索
const testSearch = async () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }

  addLog(`开始搜索: ${searchKeyword.value}`)
  try {
    const data = await mapAPI.searchLocation(searchKeyword.value)
    
    if (data.status === 0) {
      searchResults.value = data.data.map((item: any) => ({
        title: item.title,
        address: item.address,
        location: item.location
      }))
      addLog(`搜索成功，找到 ${searchResults.value.length} 个结果`)
      ElMessage.success(`搜索成功，找到 ${searchResults.value.length} 个结果`)
    } else {
      addLog(`搜索失败: ${data.message}`)
      ElMessage.error('搜索失败')
    }
  } catch (error) {
    addLog(`搜索错误: ${error}`)
    ElMessage.error('搜索错误')
    console.error('搜索错误:', error)
  }
}
</script>

<style scoped>
.test-jsonp-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
}

.test-section h3 {
  margin-top: 0;
  color: #409eff;
}

.result {
  margin-top: 15px;
  padding: 10px;
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
}

.result ul {
  margin: 5px 0;
  padding-left: 20px;
}

.logs {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.logs h3 {
  margin-top: 0;
  color: #67c23a;
}

.log-content {
  max-height: 200px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.log-item {
  padding: 2px 0;
  border-bottom: 1px solid #eee;
}

.log-item:last-child {
  border-bottom: none;
}
</style>