T

腾讯地图小程序开发技能

開発v1.0.4
作者:u_3c6a94b4✓ 認証済み公開者:腾讯科技(深圳)有限公司更新日 2026-10-01tencentmap-miniprogram-skill@tencent-adm/tencentmap-miniprogram-skill
フロントエンド開発スクリプトツール

AlphaMoatによると、2026-09時点で腾讯地图小程序开发技能のダウンロード数は3,425、スター数は4で、AIスキル全体5,078件中3,259位、開発では577件中417位です。

インストール数
234
ダウンロード数
3425
スター数
4
総合順位
#3,259
全体の上位 65% · 開発の上位 73%
プラットフォームインストール数ダウンロード数スター数コメント
SkillHub ↗23434254—

プラットフォームごとに集計方法と集計時点が異なります。

このスキルでできること

このスキルは、WeChat ミニプログラムのマップ開発に関する完全なガイドを提供します。マップコンポーネント(マーカー、callout、polyline、polygon、circle、マーカークラスタリング、衝突検出、マップコントロール)、32個の MapContext API(マップ制御・マーカー管理・クラスタリング・オーバーレイ・ビジュアルレイヤー・カスタムレイヤー・座標変換)、12個の wx 位置情報 API(現在地取得・地点選択・継続位置更新)、そして wx.request によるテンセント位置情報 WebService API への直接呼出し(ジオコーディング・POI 検索・ルート案内・天気など)をカバーします。Key の自動取得と候補プール切替、layerId の事前チェック、3つのサンプルプロジェクト、パフォーマンス・GCJ-02 座標系・権限宣言に関する注意事項を含みます。

資料公開日 2026-10-27

できること

  • ミニプログラムのページにマップを追加し、カスタム callout 付きマーカーを表示
  • WebService API で POI 検索・ルート案内・ジオコーディングを実行
  • 大量のマーカーをクラスタリング表示、または moveAlong で軌跡再生

使う場面

  • WeChat ミニプログラムのマップ機能開発(map コンポーネント・marker・polyline・ナビ・POI 検索など)が絡むとき
  • ミニプログラムに位置情報取得・地点選択・継続位置更新を組み込むとき
  • テンセント位置情報 WebService API の全パラメータ直呼び出しが必要なとき

プロンプト例

スキルのドキュメントをもとに生成した例であり、実際の実行結果ではありません。

ミニプログラムのページにマップを置いて、会社の場所にマーカーと吹き出しを表示して
現在地から目的地までの車ルート案内を実装して
マップに何千ものマーカーがあるので、クラスタリングで最適化して

月次の推移

ダウンロード数3425
0184336862026-03 · ダウンロード数 1592026-05 · ダウンロード数 7222026-06 · ダウンロード数 10882026-08 · ダウンロード数 26892026-09 · ダウンロード数 342526-0326-09
スター数4
0242026-03 · スター数 -2026-05 · スター数 -2026-06 · スター数 -2026-08 · スター数 42026-09 · スター数 426-0326-09

2026-09 から集計方法を変更し、同名スキルを作者ごとに分けて集計し、全スキルを対象にしました。破線は変更前の月で、変更後のデータとは直接比較せず、変更をまたぐ増減も計算していません。 同名の別スキルがあるため、変更前のデータは現在ダウンロード数が最も多いこのスキルに帰属させています。

月ダウンロード数前月比スター数
2026-093425—4
2026-082689—4
2026-061088+50.7%-
2026-05722—-
2026-03159—-

SKILL.md 原文

作者が公開した元のファイルをテキストのまま表示しています。AlphaMoat による編集や審査はしていません。リンクはクリックできません。コマンドは内容を確認してから実行してください。取得日 2026-10-23。

14 KB・SkillHub v1.0.5
---
name: tencentmap-miniprogram-skill
version: 1.0.5
description: "此技能提供微信小程序地图开发的完整指导,包括地图组件使用、位置服务、标记点管理、路线规划、地理编码、POI搜索、点聚合和可视化图层等功能。当用户需求涉及微信小程序地图功能开发(如 map 组件、marker、callout、polyline、polygon、circle、地图、点标记、折线、多边形、圆形、弧线、定位、导航、路线规划、POI搜索、地理编码、点聚合、热力图、腾讯地图 SDK 等)时,应加载此技能。后端服务能力统一通过 wx.request 直连腾讯位置服务 WebService API 全参数调用。适用平台:微信小程序。"
---

# 腾讯地图小程序开发技能

帮助用户在微信小程序中实现地图功能开发,包含地图组件、位置服务、地图控制和后端服务能力。
すべて表示(全 299 行)
## 目录结构

### API 文档

所有API文档位于 `references/` 目录:

#### 地图组件文档
- **references/map_component_guide.md** - 完整的小程序地图组件文档
  - 地图基础属性:longitude、latitude、scale、rotate、skew等
  - 标记点(marker):在地图上显示标注,支持自定义图标、气泡、标签
  - 路线(polyline):绘制路线和彩虹线,支持箭头、文本标注
  - 多边形(polygon):绘制闭合区域,支持虚线边框
  - 圆形(circle):显示圆形覆盖物
  - 点聚合:大量标记点的聚合展示
  - 自定义气泡:callout、customCallout
  - 地图事件:点击、视野变化、标记点点击等
  - 碰撞检测:marker碰撞关系配置
  - 地图控件:指南针、比例尺、3D楼块等

#### MapContext API文档
`references/mapContext_api/` 目录包含32个API文档:

**地图控制类**
- MapContext.md - MapContext总览
- wx.createMapContext.md - 创建MapContext实例
- MapContext.getCenterLocation.md - 获取地图中心点坐标
- MapContext.moveToLocation.md - 移动到指定位置
- MapContext.getRegion.md - 获取地图视野范围
- MapContext.getScale.md - 获取地图缩放级别
- MapContext.getRotate.md - 获取地图旋转角度
- MapContext.getSkew.md - 获取地图倾斜角度
- MapContext.setCenterOffset.md - 设置地图中心点偏移
- MapContext.setBoundary.md - 限制地图显示范围
- MapContext.includePoints.md - 缩放视野包含所有坐标点

**标记点管理类**
- MapContext.addMarkers.md - 添加标记点
- MapContext.removeMarkers.md - 移除标记点
- MapContext.translateMarker.md - 平移标记点(带动画)
- MapContext.moveAlong.md - 沿路径移动标记点(轨迹回放)
- MapContext.setLocMarkerIcon.md - 设置定位点图标

**点聚合类**
- MapContext.initMarkerCluster.md - 初始化点聚合配置
- MapContext.addMarkers.md - 添加聚合标记点

**覆盖物类**
- MapContext.addGroundOverlay.md - 添加自定义图片图层
- MapContext.updateGroundOverlay.md - 更新自定义图片图层
- MapContext.removeGroundOverlay.md - 移除自定义图片图层
- MapContext.addArc.md - 添加弧线
- MapContext.removeArc.md - 移除弧线

**可视化图层类**
- MapContext.addVisualLayer.md - 添加可视化图层
- MapContext.removeVisualLayer.md - 移除可视化图层
- MapContext.executeVisualLayerCommand.md - 执行可视化图层指令

**自定义图层类**
- MapContext.addCustomLayer.md - 添加个性化图层
- MapContext.removeCustomLayer.md - 移除个性化图层

**坐标转换类**
- MapContext.toScreenLocation.md - 经纬度转屏幕坐标
- MapContext.fromScreenLocation.md - 屏幕坐标转经纬度

**其他功能**
- MapContext.openMapApp.md - 拉起地图APP选择导航
- MapContext.eraseLines.md - 擦除或置灰已添加的线段
- MapContext.on.md - 监听地图事件

#### 位置服务API文档
`references/wx_location_api/` 目录包含12个API文档:

**基础定位**
- wx.getLocation.md - 获取当前的地理位置、速度
- wx.getFuzzyLocation.md - 获取模糊位置(隐私保护)

**地图选点**
- wx.chooseLocation.md - 打开地图选择位置
- wx.choosePoi.md - 选择POI点

**位置展示**
- wx.openLocation.md - 使用内置地图查看位置

**持续定位**
- wx.startLocationUpdate.md - 开启小程序前后台时均接收位置消息
- wx.startLocationUpdateBackground.md - 开启小程序进入前后台时均接收位置消息
- wx.stopLocationUpdate.md - 停止接收位置消息
- wx.onLocationChange.md - 监听实时地理位置变化事件
- wx.onLocationChangeError.md - 监听实时地理位置错误事件
- wx.offLocationChange.md - 取消监听实时地理位置变化事件
- wx.offLocationChangeError.md - 取消监听实时地理位置错误事件

#### 后端服务文档
后端服务能力统一通过 wx.request 直连腾讯位置服务 WebService API,全参数自由调用(文档位于 `references/webservice/`,调用方式见工作流程「1. 理解用户需求」):

- `webservice/capability_matrix.md` - 场景指南(场景一~五、前置条件、示例代码、错误码、最佳实践)
- `webservice/advanced-services.md` - 五个场景之外的高级与专项服务索引(需申请开通的能力、开通方式与工单模板)
- `webservice/api-geocoder.md` / `webservice/api-search.md` / `webservice/api-direction.md` / `webservice/api-location-weather.md` / `webservice/api-tools.md` - 直连参数文档(与 tencentmap-webservice-skill 同步)

### 示例代码

`assets/examples/` 目录包含3个小程序示例项目:

#### minicode-location/ - 定位功能示例
获取用户位置并在地图上标记

#### minicode-marker/ - 标记点示例
添加自定义标记点与气泡

#### minicode-markerCluster/ - 点聚合示例
大量标记点的聚合展示

每个示例目录下提供工程骨架(app.js / app.json / index/index.js 等),
页面结构(`.wxml`)与样式(`.wxss`)源码以代码块形式内联在该目录的 `README.md` 中,
使用时按文件名复制到对应路径即可组成完整可运行项目。

## 工作流程

### 1. 理解用户需求

当用户询问小程序地图相关问题时,首先明确:
- **功能类型**:地图显示、定位、标记点、路线规划、搜索、地图控制等
- **平台**:微信小程序
- **是否需要后端服务**:判断是否需要调用腾讯位置服务API(POI搜索、路线规划、地理编码、天气、IP定位、坐标转换等)。需要时统一通过 wx.request 直连 WebService API,按 `references/webservice/` 下文档给完整示例。
  超出这些场景时(货车路线、地址验真、室内/海外搜索、排线调度、AI 搜等),
  读 `references/webservice/advanced-services.md` 查是否有对应的高级服务接口(多为需申请开通的服务)。

### 2. Key 处理(需要后端服务时)

按此顺序自动获取 Key:`Client(key=...)` → `~/.tencentmap/tempkey.json`。各来源的 Key 会全部进入候选池。

1. **用户提供 Key**——先调用 `client.save_key("<key>")` 保存到本地配置,再执行主任务。保存后该 Key 自动进入候选池首位,后续请求无需再传。
2. **本地无可用 Key**——读取 `tempkey-guide.md`,按流程引导用户申请临时体验 Key(申请成功后由 `save_config.py` 持久化到 `~/.tencentmap/tempkey.json`)。
3. **Key 报错**——调用 `client.switch_key()` 轮询候选池切换到下一个可用 Key,并告知用户切换情况;全部不可用时,说明每个 Key 的失败原因与修正方式。

### 2.5 前置检查:可视化图层 layerId(涉及可视化图层时)

当用户需求涉及**可视化图层接口**(`MapContext.addVisualLayer` / `MapContext.removeVisualLayer` / `MapContext.executeVisualLayerCommand`)时:

1. **首先检查用户是否已提供 layerId**。layerId 是可视化图层 ID,由用户在腾讯位置服务控制台创建获得,**无法猜测或凭空生成**。
2. **用户未提供 layerId → 必须先向用户询问获取,不得擅自使用占位符或编造值**。展示以下话术:

   > 可视化图层需要 `layerId`(可视化图层 ID),在腾讯位置服务控制台创建图层后获得:
   > - 创建可视化图层(获得 layerId):https://lbs.qq.com/dev/console/layers/layerEdit
   > - 图层创建后还需满足两个前置条件:
   >   1. map 组件需配置 `subkey` 参数,且该 subkey 与 layerId 绑定;
   >   2. 需在[图层绑定页面](https://lbs.qq.com/dev/console/layers/layerBind)授权当前小程序 APPID,否则真机调用会失败。
   >
   > 请提供您的 layerId(以及已绑定它的 subkey,若与默认不同)。

3. **用户提供 layerId 后**:确认 `subkey` 已配置、告知用户在图层绑定页面完成 APPID 授权(如未完成),再进入代码编写。
4. **代码中不得硬编码占位符**(如 `YOUR_LAYER_ID`),应使用用户提供的实际值。

### 3. 查询 API 文档

根据需求类型读取对应的 references 文件:

- **地图显示/组件相关** → 读取 `references/map_component_guide.md`
- **地图控制/MapContext** → 读取 `references/mapContext_api/` 下对应文件
- **可视化图层** → 读取 `references/mapContext_api/MapContext.addVisualLayer.md`、`MapContext.removeVisualLayer.md`、`MapContext.executeVisualLayerCommand.md`、`MapContext.on.md`(visualLayerEvent 事件)
- **定位和用户位置相关** → 读取 `references/wx_location_api/` 下对应文件
- **LBS后端服务(WebService 直连)** → 读取 `references/webservice/capability_matrix.md` 确认场景 → 读取 `references/webservice/` 下对应 `api-*.md`

对于大文件,使用 grep 搜索关键信息,例如marker:
```bash
grep -n "marker\|标记点" references/map_component_guide.md
```

### 4. 查找示例代码

根据需求在 `assets/examples/` 目录查找对应示例:

- **定位功能** → `assets/examples/minicode-location/`
- **标记点功能** → `assets/examples/minicode-marker/`
- **点聚合功能** → `assets/examples/minicode-markerCluster/`
- **可视化图层** → 暂无对应示例项目,以 `references/mapContext_api/` 下的 addVisualLayer 文档为准

读取示例代码的关键文件:
```bash
# 查看页面逻辑与工程骨架
cat assets/examples/minicode-marker/index/index.js

# 查看页面结构(.wxml)与样式(.wxss)源码
cat assets/examples/minicode-marker/README.md
```

### 5. 提供解决方案

根据文档和示例,为用户提供:
- 完整的代码示例(WXML + JS + WXSS)
- API参数详细说明
- 注意事项和最佳实践
- 权限处理建议


## 注意事项

### 地图组件

1. **坐标系**:
   - 小程序地图使用 **GCJ-02**(国测局坐标,火星坐标)
   - `wx.getLocation({ type: 'gcj02' })` 直接返回GCJ-02坐标
   - GPS设备返回的WGS-84坐标需要转换

2. **组件尺寸**:
   - `<map>` 标签建议设置宽高

3. **个性化地图**:
   - 需要在微信公众平台购买并配置
   - 使用 `subkey` 参数传入专属KEY
   - 使用 `layer-style` 指定样式

4. **权限声明**:
   - 自2022年7月14日后发布的小程序,使用位置接口需在 `app.json` 中声明
   ```json
   {
     "permission": {
       "scope.userLocation": {
         "desc": "你的位置信息将用于小程序位置接口的效果展示"
       }
     }
   }
   ```

5. **API规范(非常重要)**:
   - 所有API调用必须使用文档中定义的接口、属性、事件
   - 所有参数必须严格遵守文档格式要求
   - 不确定的参数格式请查阅对应demo

### 位置服务

1. **调用频率限制**:
   - 基础库 2.17.0 起,`wx.getLocation` 增加调用频率限制
   - 避免高频率调用,推荐使用持续定位接口

2. **高精度定位**:
   - 开启高精度定位会增加接口耗时
   - 可设置 `highAccuracyExpireTime` 控制超时时间

3. **持续定位**:
   - 使用 `wx.onLocationChange` 进行持续定位
   - 页面卸载时调用 `wx.stopLocationUpdate` 停止定位

### 腾讯位置服务后端服务

1. **申请Key**:读取 `tempkey-guide.md` 按其中步骤执行

2. **商业授权**:
   - 商业使用需要授权(政府公共事务及公益组织除外)
   - 详见腾讯位置服务官网说明

3. **前置条件**(域名白名单、Key 白名单策略)见 `references/webservice/capability_matrix.md`「1. 直连前置条件」

4. **错误码**:直连返回完整 WebService 状态码(110/112/113/120/121/190/199 等),对照 `references/webservice/capability_matrix.md` 错误处理章节

5. **签名校验**:开启签名校验的 Key 直连需按 WebService 签名规范自行计算 sig 并随请求传递

6. **配额**:直连使用 WebService 配额体系

### 性能优化

1. **标记点优化**:
   - 标记点过多时使用点聚合功能
   - 及时移除不需要的标记点

2. **数据更新**:
   - 避免频繁 `setData` 更新地图数据
   - 使用 `setting` 对象批量更新属性

3. **路线优化**:
   - 路线点位过多时进行抽稀处理
   - 使用 `polyline` 的 `colorList` 绘制彩虹线

4. **内存管理**:
   - 及时移除不需要的图层和覆盖物
   - 页面卸载时清理地图资源

详细的快速开始指南、常见场景和最佳实践,参见 `quick_start_and_best_practices.md`。

## 相关链接

- [微信小程序地图组件文档](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)
- [微信小程序位置API文档](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html)
- [腾讯位置服务官网](https://lbs.qq.com/)
- [微信小程序地图插件使用指南](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)
- [腾讯位置服务WebService API文档](https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview)

開発の人気スキル

データ月:2026-09 · ダウンロード数、スター数、インストール数は公開スキルレジストリ(ClawHub、SkillHub)から月単位で集計しています。詳しくはデータの方法論をご覧ください。