miniprogramme/utils/map-setup.md
2025-09-12 16:08:17 +08:00

118 lines
No EOL
3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 高德地图小程序集成配置说明
## 1. 申请高德地图API Key
1. 访问高德开放平台https://lbs.amap.com/dev/
2. 注册开发者账号并实名认证
3. 创建应用,选择"微信小程序"平台
4. 获取API Key复制到 `config/config.js``amapKey` 字段
## 2. 配置微信小程序合法域名
在微信小程序后台mp.weixin.qq.com的"开发设置"中添加以下合法域名:
**request合法域名**
- https://restapi.amap.com
**uploadFile合法域名**
- https://restapi.amap.com
**downloadFile合法域名**
- https://restapi.amap.com
## 3. 位置权限配置
app.json 中已配置位置权限:
```json
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"requiredBackgroundModes": ["location"],
"requiredPrivateInfos": ["getLocation"]
}
```
## 4. 使用的功能
当前实现的地图功能包括:
### 基础功能
- GPS定位获取当前位置
- 高德地图逆地理编码(经纬度转地址)
- 地图标记显示
- 位置权限管理
- 定时位置更新
### 高级功能
- 好友位置显示
- 附近用户搜索
- 位置距离计算
- 地图区域自适应
- 位置隐私保护
### API集成
- 与后端位置服务完整对接
- 支持位置上传和好友位置获取
- 附近用户搜索功能
- 位置历史记录
## 5. 文件结构
```
miniprogram/
├── libs/
│ └── amap-wx.js # 高德地图SDK
├── utils/
│ ├── map-config.js # 地图配置和工具类
│ └── api-client.js # API客户端已添加位置相关方法
├── pages/map/
│ ├── map.js # 地图页面逻辑
│ ├── map.wxml # 地图页面模板
│ └── map.wxss # 地图页面样式
└── config/
└── config.js # 配置文件需要添加amapKey
```
## 6. 注意事项
1. **API Key安全**不要将API Key提交到公开仓库
2. **权限引导**:首次使用时会引导用户授权位置权限
3. **网络环境**高德API需要网络连接注意处理网络异常
4. **坐标系**使用GCJ02坐标系高德地图标准
5. **性能优化**位置更新采用30秒间隔避免频繁请求
## 7. 测试建议
1. 真机测试位置权限和定位功能
2. 测试网络异常情况的处理
3. 验证好友位置显示是否正常
4. 检查地图标记和交互功能
## 8. 故障排除
### 定位失败
- 检查位置权限是否开启
- 确认网络连接正常
- 验证高德API Key是否有效
### 地址解析失败
- 检查合法域名配置
- 确认API Key额度是否充足
- 验证网络请求是否被拦截
### 地图显示异常
- 检查坐标数据格式
- 确认地图组件属性配置
- 验证标记数据结构是否正确
## 9. 扩展功能
可以根据需要添加更多功能:
- 路径规划和导航
- POI搜索
- 地理围栏
- 轨迹回放
- 多种地图图层