从0到1打造AI地图拓客小程序，微信小程序+Express+AI实战全解析

代码搬运媛 代码搬运媛
征文大赛 2026-05-21
从0到1打造AI地图拓客小程序，微信小程序+Express+AI实战全解析

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

作者: 代码搬运媛 发布时间: 已于 2026-04-16 12:24:00 修改
来源: https://blog.csdn.net/sinat_33255495/article/details/160188572

这个想法始于一次偶然的聚会，一个朋友无意间谈起拓客的困难之处，于是我萌生了这个拓客小程序的想法。

一、项目背景：直击拓客核心痛点

通过走访问询很多线下商户和小微企业主，他们的拓客需求普遍有如下问题：

  1. 精准度低：靠人工在地图上逐点搜索，只能按基础业态筛选，无法精准匹配目标客户群体；
  2. 效率低下：手动记录商户信息、整理Excel，几百条客户信息要耗费数小时；
  3. 缺乏分析：拿到客户数据后，无法判断客户质量、拓客潜力，导致拓客方向盲目。

基于这些痛点，我确定了「拓客助手」小程序的核心目标：以腾讯位置服务为地图底座，结合AI智能分析能力，打造轻量化、一站式的拓客工具，让用户只需选择行业、划定范围，就能快速获取精准客户信息，完成数据整理与智能分析，大幅降低拓客门槛。

二、核心功能展示

1. 搜索页

这是小程序的核心入口，支持自定义行业搜索、范围精准划定两大能力：

  • 顶部搜索栏可输入目标客群关键词，下方预设童装店、游泳馆、健身房等高频拓客业态，一键快速筛选；
  • 支持「全国/指定区域」定位切换，可选择500m、1km、3km、5km四种搜索范围，适配不同拓客场景；
  • 点击「开始搜索」，即可基于腾讯位置服务POI检索能力，拉取对应区域、对应行业的商户信息，同时在地图上可视化展示商户点位，直观呈现客户分布。

2. 客户收藏与跟进管理页

为了实现客户全生命周期管理，小程序设计了收藏功能，支持多维度客户状态标记：

  • 搜索到的商户可一键收藏，收藏后可标记「未跟进、已电联、已拜访、意向客户」四种状态，清晰梳理拓客进度；
  • 支持批量导出收藏列表为Excel，无需手动复制粘贴，直接完成客户数据归档。

3 个人中心与数据统计页

个人中心整合核心数据与功能入口，让用户随时掌握使用情况：

  • 展示今日搜索次数、收藏商户数、总导出次数等核心数据，直观呈现拓客效率；
  • 包含导出记录、关于我们等功能入口，支持退出登录，保障用户体验

4. 搜索历史记录页

自动留存用户搜索记录，包括搜索范围、位置、结果数量及搜索时间，方便用户回溯历史搜索场景，无需重复输入条件

在这里插入图片描述

5. AI 自动生成拓客话术

用户选中单个商户，一键生成专属拓客话术（上门拜访、微信添加、电话沟通），提升拓客成功率。

在这里插入图片描述

三、技术栈选型

为了兼顾开发效率、小程序体验与后端扩展性，本次项目采用「前端+后端+AI」分层架构，技术栈选型如下： 前端层

  • 核心框架：微信原生小程序（WXML+WXSS+JS），轻量适配小程序生态，加载速度快、用户体验流畅；
  • 地图能力：腾讯位置服务微信小程序SDK（调用POI检索、地图渲染、定位等核心能力）。后端层
  • 核心框架：Express（Node.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.js
const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
// 初始化腾讯地图SDK
const qqmapsdk = new QQMapWX({
  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.city + geoRes.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.code === 200) {
          // 处理地图标记点
          const markers = res.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.js
const express = require('express');
const router = express.Router();
const axios = require('axios');
require('dotenv').config();

// 腾讯位置服务POI检索接口
const TENCENT_POI_URL = 'https://apis.map.qq.com/ws/place/v1/search';

// 行业关键词POI检索
router.post('/search', async (req, res) => {
  try {
    const { industry, latitude, longitude, range } = req.body;
    // 拼接腾讯地图POI检索参数
    const response = await axios.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.status === 0) {
      // 格式化商户数据，提取核心信息
      const customerList = response.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.exports = router;

3. AI能力接入：轻量化改造，快速提效

AI接入采用调用第三方大模型API的方式，无需本地部署模型，仅需通过HTTP请求传递数据，实现核心AI能力。

用户选中单个商户，一键生成专属拓客话术（上门拜访、微信添加、电话沟通），提升拓客成功率，核心代码如下：

// 新增AI话术生成接口
router.post('/generate/words', async (req, res) => {
  try {
    const { customerInfo } = req.body;
    const response = await axios.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'
      }
    });
    const words = JSON.parse(response.data.output.text);
    res.json({ code: 200, data: words, msg: '生成成功' });
  } catch (error) {
    res.json({ code: 500, msg: '生成失败', data: {} });
  }
});

核心功能及代码展示如上，如果有感兴趣的小伙伴欢迎私信交流。

* AI润色输出，仅供参考

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

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

办理咨询

相关推荐

腾讯位置服务实战：长沙市青年人才公寓 GIS 可视化平台开发

作者: 夜郎king 发布时间: 已于20260421 00:06:41修改 来源: https

征文大赛 2026-05-21

基于YOLOv8与腾讯地图的视障辅助Android应用——从模型训练到端侧部署全链路实践

作者: Undoom 发布时间: 已于20260429 08:37:35修改 来源: https

征文大赛 2026-05-21

腾讯位置服务IP定位：输入IP查定位的技术实现与场景应用

叮小猿 叮小猿

在智慧物流数字营销网络安全等场景中，精准获取IP地址对应的地理位置如城市级甚至区县级定位是业务决策的

IP定位 2026-03-02