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

3 KiB
Raw Blame History

高德地图小程序集成配置说明

1. 申请高德地图API Key

  1. 访问高德开放平台:https://lbs.amap.com/dev/
  2. 注册开发者账号并实名认证
  3. 创建应用,选择"微信小程序"平台
  4. 获取API Key复制到 config/config.jsamapKey 字段

2. 配置微信小程序合法域名

在微信小程序后台mp.weixin.qq.com的"开发设置"中添加以下合法域名:

request合法域名

uploadFile合法域名

downloadFile合法域名

3. 位置权限配置

app.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搜索
  • 地理围栏
  • 轨迹回放
  • 多种地图图层