104 lines
2.8 KiB
Markdown
104 lines
2.8 KiB
Markdown
# 签到签退地址显示配置说明
|
||
|
||
## 问题描述
|
||
签到签退功能中，位置信息显示为数字（经纬度坐标），需要转换为具体的地址信息（如：安徽省合肥市蜀山区xxx）。
|
||
|
||
## 解决方案
|
||
使用腾讯地图逆地理编码API，将经纬度坐标转换为详细地址。
|
||
|
||
## 配置步骤
|
||
|
||
### 1. 申请腾讯地图Key
|
||
|
||
1. 访问腾讯地图开放平台：https://lbs.qq.com/
|
||
2. 注册/登录账号
|
||
3. 进入控制台：https://lbs.qq.com/dev/console/application/mine
|
||
4. 创建应用
|
||
5. 添加Key（选择"WebServiceAPI"类型）
|
||
6. 复制生成的Key
|
||
|
||
### 2. 配置Key
|
||
|
||
打开文件：`peidu/uniapp/src/config/map.js`
|
||
|
||
将第10行的 `YOUR_TENCENT_MAP_KEY` 替换为实际的Key：
|
||
|
||
```javascript
|
||
export const TENCENT_MAP = {
|
||
key: 'YOUR_TENCENT_MAP_KEY', // 替换为实际的key
|
||
geocoderUrl: 'https://apis.map.qq.com/ws/geocoder/v1/',
|
||
}
|
||
```
|
||
|
||
### 3. 配置小程序域名白名单
|
||
|
||
在微信小程序管理后台配置服务器域名：
|
||
|
||
**request合法域名：**
|
||
```
|
||
https://apis.map.qq.com
|
||
```
|
||
|
||
配置路径：
|
||
1. 登录微信小程序管理后台
|
||
2. 开发 -> 开发管理 -> 开发设置
|
||
3. 服务器域名 -> request合法域名
|
||
4. 添加 `https://apis.map.qq.com`
|
||
|
||
## 功能说明
|
||
|
||
### 地址显示格式
|
||
|
||
逆地理编码会返回以下信息：
|
||
- **province**: 省份（如：安徽省）
|
||
- **city**: 城市（如：合肥市）
|
||
- **district**: 区县（如：蜀山区）
|
||
- **street**: 街道（如：长江西路）
|
||
- **street_number**: 门牌号（如：123号）
|
||
|
||
最终显示格式：`安徽省合肥市蜀山区长江西路123号`
|
||
|
||
### 失败处理
|
||
|
||
如果逆地理编码失败（网络问题、Key无效等），会显示经纬度坐标：
|
||
```
|
||
位置: 31.820586, 117.227239
|
||
```
|
||
|
||
## 文件修改清单
|
||
|
||
1. **新增文件**：
|
||
- `peidu/uniapp/src/config/map.js` - 地图配置和工具函数
|
||
|
||
2. **修改文件**：
|
||
- `peidu/uniapp/teacher-package/pages/teacher/watermark-checkin.vue` - 签到签退页面
|
||
|
||
## 测试步骤
|
||
|
||
1. 配置腾讯地图Key
|
||
2. 配置小程序域名白名单
|
||
3. 重新编译小程序
|
||
4. 进入签到签退页面
|
||
5. 点击"刷新"按钮获取位置
|
||
6. 查看地址是否正确显示
|
||
|
||
## 注意事项
|
||
|
||
1. **Key安全**：不要将Key提交到公开的代码仓库
|
||
2. **配额限制**：腾讯地图免费版有调用次数限制，注意监控使用量
|
||
3. **定位权限**：确保小程序已获得用户的定位权限
|
||
4. **网络环境**：逆地理编码需要网络连接
|
||
|
||
## 备用方案
|
||
|
||
如果腾讯地图不可用，可以使用高德地图：
|
||
|
||
1. 申请高德地图Key：https://lbs.amap.com/
|
||
2. 修改 `map.js` 中的配置
|
||
3. 配置域名白名单：`https://restapi.amap.com`
|
||
|
||
## API文档
|
||
|
||
- 腾讯地图逆地理编码：https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder
|
||
- 高德地图逆地理编码：https://lbs.amap.com/api/webservice/guide/api/georegeo
|