腾讯地图+微信小程序+腾讯龙虾=开店大师

算法老李 算法老李
征文大赛 2026-05-21
腾讯地图+微信小程序+腾讯龙虾=开店大师

【腾讯位置服务开发者征文大赛】腾讯地图+微信小程序+腾讯龙虾=开店大师

作者: 算法老李 发布时间: 已于 2026-04-23 19:59:16 修改
来源: https://blog.csdn.net/OD2024hw/article/details/160449087


目录

  • 选址,为什么这么难项目一览:它到底能做什么技术架构:微信小程序 + 腾讯位置服务整体技术栈核心 API 调用链路准备工作:WorkBuddy 安装 腾讯地图Skill技术深度:从场景到实现的完整闭环创意性:把"玄学选址"变成"数据决策"技术深度:六类 API 的串联与工程化① POI 分页循环采集② 批量关键词合并与去重③ 面向 QPS 限制的工程化设计④ 自研评分引擎⑤ 原生 Canvas 2D 雷达图能力丰富度:六类地图能力的综合调用工具结合度:AI 辅助开发的协同工作流应用场景演示场景一:快餐小吃选址分析场景二:多地址横向对比总结

选址,为什么这么难

作为一个小有积蓄的老开发,最近想和朋友一起开一个店作为副业,但是选址又成了一大难题。看着手机里密密麻麻的商铺信息,满脑子问号:

这个铺位月租 3 万,旁边 200 米内有 4 家奶茶店,到底值不值开?

地铁口走过来要 8 分钟,人流看起来还行,但周边竞品扎堆,真的还有空间吗?

我没有商业地产的背景,没有专业机构的报告,唯一能依靠的就是大众点评、Google Maps,以及——走了无数冤枉路。

传统选址依赖"经验"和"腿"。但对于一个没有实操经验、刚起步的创业者来说,"经验"根本不存在。那一刻我就在想:能不能用技术手段,把选址变成一道有数据支撑的判断题,而不是靠玄学的选择题?

于是,「开店大师」这个微信小程序诞生了。

它的目标很简单:输入一个地址,选定业态(奶茶店、快餐、健身房……),AI 自动扫描周边竞争格局、客流潜力、交通便利度、商业配套,生成一份选址报告。

整个过程不需要任何 GIS 背景,不需要写代码,只需要会打字。

项目地址和录屏如下

项目地址https://gitcode.com/OD2024hw/kids

(录屏演示)

📹 嵌入式视频: https://live.csdn.net/v/embed/523176

腾讯地图

项目一览:它到底能做什么

「开店大师」的核心使用流程只有三步:

Step 1:输入地址 用户在小程序首页输入目标地址(如"深圳市南山区科技园南区"),系统通过腾讯地图地理编码 API 将地址转换为经纬度坐标。

在这里插入图片描述

Step 2:一键分析 选定经营业态(如奶茶咖啡、快餐小吃、美甲美睫等),设置分析半径(默认 1000 米),点击开始分析。小程序依次调用腾讯位置服务的 POI 检索接口,采集周边各类设施数据:

  • 竞品扫描:该业态的同类店铺(通过关键词批量检索)
  • 交通设施:地铁站、公交站、停车场
  • 客群画像:住宅小区、写字楼
  • 商业配套:餐厅、商场、银行、超市、便利店

Step 3:查看报告 分析完成后,生成一份包含四项评分的选址报告:

  • 📊 雷达图:直观展示四项能力的综合表现
  • 🗺️ 竞品地图:周边同类店铺分布,一目了然
  • 🤖 AI 报告:结构化的优势、风险、建议输出
  • 📋 数据明细:具体 POI 数量与距离数据

在这里插入图片描述

技术架构:微信小程序 + 腾讯位置服务

整体技术栈

整体思路是:小程序负责 UI 和交互,腾讯位置服务负责所有地理数据,二者通过 wx.request 交互。

全程用腾讯龙虾 WorkBuddy完成开发,没有手写一个代码。

核心 API 调用链路

腾讯位置服务 WebService API 是整个项目的技术核心,以下是实际使用到的几个接口:

地理编码(地址 → 坐标)

GET https://apis.map.qq.com/jsapi?v=1&key=YOUR_KEY&address=深圳市南山区科技园

用于用户输入地址后,将文本地址转换为经纬度坐标。这是整个分析流程的起点。

地址补全(智能提示)

GET https://apis.map.qq.com/jsapi/v1/suggestion?key=YOUR_KEY&keyword=科技园

提供输入即联想的地址下拉提示,提升用户体验。

周边探索(核心 POI 采集)

GET https://apis.map.qq.com/place/v1/explore?key=YOUR_KEY
  &boundary=nearby(22.543,113.931,1000)
  &keyword=奶茶
  &page_index=1
  &page_size=20
  &output=json

这是最关键的接口。通过boundary=nearby(lat,lng,radius)设置圆形搜索范围,keyword指定搜索关键词,page_index控制分页。

距离计算(客户端计算,非 API)

// Haversine 公式,根据两点经纬度计算球面距离
function calcDistance(lat1, lng1, lat2, lng2) {
  const R = 6371000; // 地球半径(米)
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLng = (lng2 - lng1) * Math.PI / 180;
  const a = Math.sin(dLat/2) ** 2 +
             Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
             Math.sin(dLng/2) ** 2;
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  return Math.round(R * c);
}

准备工作:WorkBuddy 安装 腾讯地图Skill

确认你已安装 WorkBuddy,下载地址:https://www.codebuddy.cn/work/ 第一步: 在 WorkBuddy 点击技能,搜索腾讯地图

在这里插入图片描述

第二步: 注册配置Key 如果您还没有腾讯地图开发者账号,请按以下步骤申请:

  1. 访问 腾讯位置服务控制台
  2. 注册并登录账号
  3. 进入「应用管理」→「我的应用」
  4. 创建新应用并添加 Key
  5. 选择「Web端」服务类型
  6. 获取 Key

注意:创建好key之后还需要分配额度。

在这里插入图片描述

第三步: 开始使用 直接在 Claw 对话中使用这个 Skill 的能力,对话时如果没有设置key会提示填写key,则将上一步申请的key填入即可,可以进行如下对话例如: “帮我用腾讯地图 JSAPI 创建一个 HTML 页面,显示腾讯地图,中心点在腾讯大厦,缩放级别 15”

在这里插入图片描述

技术深度:从场景到实现的完整闭环

本章节从创意性技术深度能力丰富度工具结合度四个维度,对「开店大师」进行系统性技术剖析。

创意性:把"玄学选址"变成"数据决策"

选址这件事,长期以来依赖个人经验和"风水直觉"。市面上不缺地图工具,也不缺商铺信息平台,但缺少一个能把两者结合、让普通人也能用数据做选址判断的工具。

本项目的核心创意在于三点:

① 以业态关键词为粒度的竞品扫描

传统选址工具只展示"周边有什么",而本项目以用户选定的业态(奶茶、快餐、健身房……)为出发点,通过该业态的关键词组合(“奶茶”、“茶饮”、“咖啡”、“饮品”)精准锁定同类竞品。换一个业态,扫描逻辑随之改变,真正做到了"业态感知"。

② 四维评分体系的量化表达

将选址这一主观判断拆解为四个可量化的维度——人流潜力(30分)、竞争格局(25分)、交通便利(25分)、商业配套(20分),总分 100 分。每一维度的分数背后都有明确的 POI 数据支撑,而非拍脑袋打分。

③ 多地址横向对比的决策辅助

用户可以收藏多个候选地址,在对比页面直观看到各项雷达图叠加、分数并列展示。这解决了"同时看好 A 和 B 地址,不知道选哪个"的实际决策困境。

技术深度:六类 API 的串联与工程化

本项目深度整合了腾讯位置服务 WebService API 的多个接口,形成完整的数据采集链路。关键技术点如下:

① POI 分页循环采集

place/v1/explore接口默认返回 20 条结果,必须通过分页循环才能获取完整数据。核心实现是 while 循环 + 总数兜底判断:

async function exploreNearby({ lat, lng, radius = 1000, keyword, page_size = 20 }) {
  const allPOIs = [];
  let page_index = 1;

  while (true) {
    const res = await request(`${BASE_URL}/place/v1/explore`, {
      boundary: `nearby(${lat},${lng},${radius})`,
      keyword, page_index, page_size, output: 'json',
    });

    const pois = res.data || [];
    allPOIs.push(...pois);

    if (pois.length < page_size || allPOIs.length >= res.count) break;
    page_index++;
  }

  return { count: res.count || 0, pois: allPOIs };
}

关键逻辑:若pois.length < page_size,说明已经是最后一页;若allPOIs.length >= res.count,则已拉完。双重退出条件确保不漏数据、不死循环。

② 批量关键词合并与去重

竞品扫描需要同时查询多个关键词。用Map替代数组实现 O(1) 时间复杂度的 POI 去重:

async function batchExplore(lat, lng, radius, keywordsArr, interval = 300) {
  const poiMap = new Map();  // Map.has() 是 O(1),大数据量下远优于 Array.includes()

  for (let i = 0; i < keywordsArr.length; i++) {
    const r = await exploreNearby({ lat, lng, radius, keyword: keywordsArr[i] });
    r.pois.forEach(poi => {
      if (!poiMap.has(poi.id)) poiMap.set(poi.id, poi);
    });
    if (i < keywordsArr.length - 1) await sleep(interval);
  }

  return Array.from(poiMap.values());
}

③ 面向 QPS 限制的工程化设计

腾讯地图 API 对每个 Key 有 QPS 上限(实测约 5 次/秒),因此整个分析流程严格串行执行,每次请求间隔 300ms,并在底层request函数中加入状态码103(请求过于频繁)的自动重试机制:

success: (res) => {
  if (res.data.status === 0) resolve(res.data);
  else if (res.data.status === 103 && attempt < retries) {
    setTimeout(() => doRequest(attempt + 1), 500);  // QPS 超限,等待 500ms 再试
  } else {
    reject(new Error(res.data.message));
  }
}

④ 自研评分引擎

评分模型完全手写,不依赖任何第三方库。四维评分各有独立计算逻辑:

最终得分换算为 S/A/B/C/D 五级评级。

竞争格局评分采用分段函数设计,逻辑如下:

  • 0 家:给 5 分而非满分,因为缺乏竞品可能意味着这个市场本身不存在
  • 1-10 家:线性递增,竞品越少得分越高
  • 10-30 家:维持满分 25 分,认为这是成熟商圈的正常状态
  • 30-50 家:开始扣分,竞争趋于过度
  • 50 家以上:严重过度饱和,维持 5 分

这一设计让评分更接近真实的商业直觉,而非机械地"竞品越少越好"。

⑤ 原生 Canvas 2D 雷达图

放弃 ECharts,改用原生 Canvas 2D 手绘雷达图。微信小程序的 Canvas 环境与浏览器不同,需通过wx.createSelectorQuery().node()获取节点,并乘以devicePixelRatio保证高分辨率屏幕下的清晰度:

const dpr = wx.getSystemInfoSync().pixelRatio;
const query = wx.createSelectorQuery();
query.select('#radar-chart').node((res) => {
  const canvas = res.node;
  canvas.width = 300 * dpr;   // 物理像素
  canvas.height = 300 * dpr;
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);
  this.drawRadarCanvas(ctx, 300, 300, radar, values);
}).exec();

雷达图绘制算法:计算每个维度的归一化半径 → 连接各点形成数据多边形 → 半透明填充 → 标注维度名称和顶点圆点。

能力丰富度:六类地图能力的综合调用

本项目涉及的腾讯位置服务能力覆盖地图定位、检索、可视化三大类:

六类能力的串联逻辑:地址联想(体验优化)→ 地理编码(数据入口)→ POI 采集(核心数据)→ 距离计算(数据加工)→ 地图 + 雷达图(结果可视化),形成了从用户输入到选址报告输出的完整数据闭环。

工具结合度:AI 辅助开发的协同工作流

本项目全程借助 WorkBuddy AI 辅助开发,覆盖了需求分析、代码生成、调试排查、素材制作等多个环节:

需求阶段:用自然语言描述功能目标,AI 生成技术方案和文件结构规划。

编码阶段:针对具体功能(如分页循环、评分公式、Canvas 绘制),向 AI 描述需求,AI 输出参考代码,再根据实际情况调整。

调试阶段:遇到报错(如 JSONP vs JSON、QPS 超限、Canvas 初始化失败),将错误日志发给 AI,AI 分析根因并给出修复建议。

素材阶段:应用图标和小程序图标通过 AI 生成 Python 脚本制作 PNG 文件,无需设计师介入。

这种"人说需求、AI 出代码、人类调试"的工作模式,降低了独立开发者的技术门槛,让没有地图 SDK 开发经验的开发者也能快速落地想法。

应用场景演示

场景一:快餐小吃选址分析

以深圳北为例,扫描半径 500 米: 综合评分:95 分(A级·优秀),结论是该地址具备较好的开店条件,建议重点考虑。

在这里插入图片描述

场景二:多地址横向对比

用户可以收藏多个候选地址,在对比页面横向查看各项评分。当两个地址总分接近时,评分明细可以帮助用户做最终决策——比如 A 地址竞争压力小但交通不便,B 地址交通便利但竞争激烈,此时用户可以根据自己的业态特点(若是快餐则优先交通,若是奶茶则优先竞争)做最终取舍。

在这里插入图片描述

总结

「开店大师」是一个从真实痛点出发的小工具。它解决的不是什么高深的技术难题,而是一个每个普通创业者都会遇到的问题:怎么用数据而不是直觉来做选址决策。

整个项目的技术实现并不复杂,但踩的坑足够真实:JSONP 与 JSON 的选择、Key 类型的权限边界、QPS 限流与分页拉取、Canvas 初始化方式的差异、评分模型的迭代优化——每一个问题都来自实际调试,而不是从文档到代码的照搬。

腾讯位置服务提供的数据能力(POI 检索、地理编码、距离计算)足够支撑这类 Location-based 的轻量应用。对于有类似想法的开发者,我的建议是:不要等完美的方案,先用现有的 API 把核心流程跑通,再逐步优化细节。

如果这个项目对你有启发,欢迎点赞、评论、转发。选址路上,我们都不是一个人在战斗。

* AI润色输出,仅供参考

我们为您提供位置服务商业授权许可

合规地图省心之选,微信生态独家支持

办理咨询

相关推荐

腾讯位置服务API导航:精准路径规划与高效路线调起的解决方案

叮小聪 叮小聪

在移动应用与Web开发中,API导航是连接用户与地理位置的核心桥梁。无论是出行类APP的路线规划,还

API导航 2026-03-03

腾讯位置服务Location API:精准地点搜索与位置信息获取的核心能力

叮小灵 叮小灵

在智慧出行本地生活服务物流配送等场景中,精准获取地点信息如坐标行政区划周边POI是企业实现LBS功能

位置搜索 2026-03-03

腾讯位置服务开发平台:企业级位置能力的技术引擎与合规护航

叮小猿 叮小猿

在数字化转型浪潮中,位置服务已成为企业连接线下场景的核心纽带无论是零售门店的精准引流物流运输的高效调

企业服务 2026-03-02