lift-pc/src/components/MapSelector.md

腾讯地图坐标选择器使用说明 (基于 tlbs-map-vue)

功能说明

MapSelector 是一个基于 tlbs-map-vue 的坐标选择器组件，用于在地图上选择经纬度坐标。

技术栈

• Vue 3
• tlbs-map-vue (腾讯地图官方 Vue 组件库)
• Element Plus

安装依赖

npm install tlbs-map-vue

使用方法

1. 配置腾讯地图API密钥

在 src/config/map.js 文件中，将 TENCENT_MAP_KEY 替换为你的实际API密钥：

export const MAP_CONFIG = {
  TENCENT_MAP_KEY: '你的腾讯地图API密钥',
  // ...其他配置
}

2. 获取腾讯地图API密钥

1. 访问腾讯位置服务官网：https://lbs.qq.com/
2. 注册并登录账号
3. 创建应用并获取API密钥（WebServiceAPI密钥）
4. 在控制台中配置域名白名单

3. 在组件中使用

<template>
  <MapSelector
    v-model="showMapSelector"
    :longitude="formField.longitude"
    :latitude="formField.latitude"
    @confirm="handleCoordinateConfirm"
  />
</template>

<script setup>
import MapSelector from '@/components/MapSelector.vue'

const showMapSelector = ref(false)
const formField = ref({
  longitude: null,
  latitude: null
})

const handleCoordinateConfirm = (coordinates) => {
  formField.value.longitude = coordinates.longitude
  formField.value.latitude = coordinates.latitude
}
</script>

Props

• modelValue: Boolean - 控制对话框显示/隐藏
• longitude: Number - 初始经度值
• latitude: Number - 初始纬度值

Events

• update:modelValue: 更新对话框显示状态
• confirm: 确认选择坐标时触发，返回 {longitude, latitude} 对象

特性

• ✅ 基于腾讯地图官方 Vue 组件库
• ✅ 支持点击地图选择坐标
• ✅ 实时显示选择的经纬度
• ✅ 支持初始坐标显示
• ✅ 响应式设计
• ✅ 自动处理地图加载

注意事项

1. 确保已正确配置腾讯地图API密钥
2. 需要在腾讯地图控制台中配置域名白名单
3. 在生产环境中建议将API密钥配置在环境变量中
4. 使用的是 WebServiceAPI 密钥，不是 JavaScript API 密钥

故障排除

如果地图无法显示：

1. 检查 API 密钥是否正确
2. 确认域名已添加到白名单
3. 检查网络连接
4. 查看浏览器控制台错误信息