frontend-miniapp/docs/TENCENT_MAP_GUIDE.md

腾讯地图集成说明

配置步骤

1. 获取腾讯地图 Key

1. 访问 腾讯位置服务
2. 注册并登录账号
3. 进入控制台 -> 应用管理 -> 我的应用
4. 创建应用并添加 Key
5. 选择产品类型：
   • H5: WebServiceAPI
   • 微信小程序: 微信小程序
   • App: 移动应用

2. 配置 Key

在 src/manifest.json 中配置：

{
  "h5": {
    "sdkConfigs": {
      "maps": {
        "qqmap": {
          "key": "YOUR_TENCENT_MAP_KEY"
        }
      }
    }
  },
  "mp-weixin": {
    "permission": {
      "scope.userLocation": {
        "desc": "您的位置信息将用于地图导航"
      }
    }
  }
}

3. 微信小程序额外配置

在微信小程序后台配置：

1. 设置 -> 开发设置 -> 服务器域名
2. 添加 request 合法域名：https://apis.map.qq.com

使用说明

uni-app 已内置地图组件，无需额外安装插件。直接使用 <map> 组件即可。

基本用法

<template>
  <map
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
    @markertap="handleMarkerTap"
  />
</template>

功能特性

• ✅ 地图显示（腾讯地图）
• ✅ 标记点（展厅、展品、设施、当前位置）
• ✅ 点击标记点跳转详情
• ✅ 楼层切换
• ✅ 定位功能
• ✅ 地图缩放
• ✅ 地图拖拽

图标资源清单

需要准备以下图标（建议 PNG 格式，透明背景）：

• /static/icons/marker-location.png - 当前位置（30x30px）
• /static/icons/marker-hall.png - 展厅（25x25px）
• /static/icons/marker-exhibit.png - 展品（25x25px）
• /static/icons/marker-facility.png - 设施（25x25px）
• /static/icons/location.png - 定位按钮图标（24x24px）

参考文档

• 腾讯位置服务官网
• uni-app 地图组件文档