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

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

## 技术栈
- Vue 3
- tlbs-map-vue (腾讯地图官方 Vue 组件库)
- Element Plus

## 安装依赖
```bash
npm install tlbs-map-vue
```

## 使用方法

### 1. 配置腾讯地图API密钥
在 `src/config/map.js` 文件中，将 `TENCENT_MAP_KEY` 替换为你的实际API密钥：

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

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

### 3. 在组件中使用
```vue
<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. 查看浏览器控制台错误信息