【腾讯位置服务开发者征文大赛】从0到1打造AI地图拓客小程序，微信小程序+Express+AI实战全解析

这个想法始于一次偶然的聚会一个朋友无意间谈起拓客的困难之处于是我萌生了这个拓客小程序的想法。一、项目背景直击拓客核心痛点通过走访问询很多线下商户和小微企业主他们的拓客需求普遍有如下问题精准度低靠人工在地图上逐点搜索只能按基础业态筛选无法精准匹配目标客户群体效率低下手动记录商户信息、整理Excel几百条客户信息要耗费数小时缺乏分析拿到客户数据后无法判断客户质量、拓客潜力导致拓客方向盲目。基于这些痛点我确定了「拓客助手」小程序的核心目标以腾讯位置服务为地图底座结合AI智能分析能力打造轻量化、一站式的拓客工具让用户只需选择行业、划定范围就能快速获取精准客户信息完成数据整理与智能分析大幅降低拓客门槛。二、核心功能展示1. 搜索页这是小程序的核心入口支持自定义行业搜索、范围精准划定两大能力顶部搜索栏可输入目标客群关键词下方预设童装店、游泳馆、健身房等高频拓客业态一键快速筛选支持「全国/指定区域」定位切换可选择500m、1km、3km、5km四种搜索范围适配不同拓客场景点击「开始搜索」即可基于腾讯位置服务POI检索能力拉取对应区域、对应行业的商户信息同时在地图上可视化展示商户点位直观呈现客户分布。2. 客户收藏与跟进管理页为了实现客户全生命周期管理小程序设计了收藏功能支持多维度客户状态标记搜索到的商户可一键收藏收藏后可标记「未跟进、已电联、已拜访、意向客户」四种状态清晰梳理拓客进度支持批量导出收藏列表为Excel无需手动复制粘贴直接完成客户数据归档。3 个人中心与数据统计页个人中心整合核心数据与功能入口让用户随时掌握使用情况展示今日搜索次数、收藏商户数、总导出次数等核心数据直观呈现拓客效率包含导出记录、关于我们等功能入口支持退出登录保障用户体验4. 搜索历史记录页自动留存用户搜索记录包括搜索范围、位置、结果数量及搜索时间方便用户回溯历史搜索场景无需重复输入条件5. AI 自动生成拓客话术用户选中单个商户一键生成专属拓客话术上门拜访、微信添加、电话沟通提升拓客成功率。三、技术栈选型为了兼顾开发效率、小程序体验与后端扩展性本次项目采用「前端后端AI」分层架构技术栈选型如下前端层核心框架微信原生小程序WXMLWXSSJS轻量适配小程序生态加载速度快、用户体验流畅地图能力腾讯位置服务微信小程序SDK调用POI检索、地图渲染、定位等核心能力。后端层核心框架ExpressNode.js轻量级后端框架快速搭建RESTful API处理前端请求、数据中转、业务逻辑数据存储MySQL存储用户信息、搜索历史、收藏商户等结构化数据工具依赖xlsx实现Excel文件生成与导出、axios发起HTTP请求对接腾讯位置服务API与AI大模型。AI能力层大模型选型通义千问免费开源API接入门槛低适配中文文本分析场景核心能力智能客户评分、行业关键词推荐、拓客话术生成、区域拓客分析。四、技术实现全过程1. 前期准备环境搭建与密钥配置1小程序端配置注册微信小程序账号获取小程序AppID在小程序后台配置合法域名包含Express后端服务域名、腾讯位置服务域名下载安装微信开发者工具初始化小程序项目引入腾讯位置服务小程序SDK在app.json中配置SDK密钥。2后端服务搭建初始化Express项目mkdir tuoke-backend cd tuoke-backend npm init -y安装核心依赖npm install express mysql2 axios xlsx cors dotenv配置环境变量在.env文件中配置腾讯位置服务密钥、AI大模型API密钥、MySQL数据库连接信息。2. 核心功能开发前端后端协同实现1地图搜索与POI检索前端核心小程序端通过腾讯位置服务SDK实现定位与搜索// pages/search/search.jsconstQQMapWXrequire(../../utils/qqmap-wx-jssdk.min.js);// 初始化腾讯地图SDKconstqqmapsdknewQQMapWX({key:你的腾讯位置服务密钥});Page({data:{industry:,// 选中的行业关键词range:1km,// 搜索范围position:未知位置,// 当前定位markers:[]// 地图标记点},// 选择行业selectIndustry(e){this.setData({industry:e.currentTarget.dataset.industry});},// 选择搜索范围selectRange(e){this.setData({range:e.currentTarget.dataset.range});},// 获取当前定位getLocation(){wx.getLocation({type:gcj02,success:(res){// 逆地理编码将经纬度转为具体位置qqmapsdk.reverseGeocoder({location:${res.latitude},${res.longitude},success:(geoRes){this.setData({position:geoRes.result.address_component.citygeoRes.result.address_component.district});}});this.setData({latitude:res.latitude,longitude:res.longitude});}});},// 开始搜索客户searchCustomer(){if(!this.data.industry){wx.showToast({title:请选择行业关键词,icon:none});return;}wx.showLoading({title:正在搜索...});// 调用后端POI检索接口wx.request({url:https://你的后端域名/api/poi/search,method:POST,data:{industry:this.data.industry,latitude:this.data.latitude,longitude:this.data.longitude,range:this.data.range},success:(res){if(res.data.code200){// 处理地图标记点constmarkersres.data.data.map((item,index)({id:index,latitude:item.lat,longitude:item.lng,title:item.title,iconPath:/images/marker.png,width:20,height:20}));this.setData({markers});// 缓存搜索结果供后续AI分析、导出使用wx.setStorageSync(customerList,res.data.data);wx.showToast({title:搜索成功,icon:success});}else{wx.showToast({title:res.data.msg,icon:none});}},fail:(){wx.showToast({title:搜索失败,icon:none});},complete:(){wx.hideLoading();}});}});2后端POI检索接口Express核心Express后端接收前端请求调用腾讯位置服务WebService API获取商户数据后返回前端// routes/poi.jsconstexpressrequire(express);constrouterexpress.Router();constaxiosrequire(axios);require(dotenv).config();// 腾讯位置服务POI检索接口constTENCENT_POI_URLhttps://apis.map.qq.com/ws/place/v1/search;// 行业关键词POI检索router.post(/search,async(req,res){try{const{industry,latitude,longitude,range}req.body;// 拼接腾讯地图POI检索参数constresponseawaitaxios.get(TENCENT_POI_URL,{params:{key:process.env.TENCENT_MAP_KEY,keyword:industry,boundary:nearby(${latitude},${longitude},${range}),// 周边搜索page_size:50,output:json}});if(response.data.status0){// 格式化商户数据提取核心信息constcustomerListresponse.data.data.map(item({id:item.id,title:item.title,// 商户名称address:item.address,// 地址tel:item.tel||暂无电话,// 电话lat:item.location.lat,// 纬度lng:item.location.lng,// 经度category:item.category// 业态分类}));res.json({code:200,data:customerList,msg:success});}else{res.json({code:500,msg:POI检索失败,data:[]});}}catch(error){res.json({code:500,msg:服务异常,data:[]});}});module.exportsrouter;3. AI能力接入轻量化改造快速提效AI接入采用调用第三方大模型API的方式无需本地部署模型仅需通过HTTP请求传递数据实现核心AI能力。用户选中单个商户一键生成专属拓客话术上门拜访、微信添加、电话沟通提升拓客成功率核心代码如下// 新增AI话术生成接口router.post(/generate/words,async(req,res){try{const{customerInfo}req.body;constresponseawaitaxios.post(https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation,{model:qwen-turbo,input:{prompt:基于商户信息${JSON.stringify(customerInfo)}分别生成上门拜访话术、微信添加开场白、电话沟通话术要求贴合商户业态语气真诚输出格式为JSON包含visit、wechat、phone三个字段},parameters:{result_format:json}},{headers:{Authorization:Bearer${process.env.AI_API_KEY},Content-Type:application/json}});constwordsJSON.parse(response.data.output.text);res.json({code:200,data:words,msg:生成成功});}catch(error){res.json({code:500,msg:生成失败,data:{}});}});核心功能及代码展示如上如果有感兴趣的小伙伴欢迎私信交流。