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
|