腾讯位置服务和路径规划：快速找到身边的厕所、公园、商场、充电桩

hust_a hust_a
征文大赛 2026-05-21
腾讯位置服务和路径规划：快速找到身边的厕所、公园、商场、充电桩

【腾讯位置服务开发者征文大赛】腾讯位置服务和路径规划：快速找到身边的厕所、公园、商场、充电桩

作者: hust_a 发布时间: 已于 2026-04-16 16:38:52 修改
来源: https://blog.csdn.net/hust_a/article/details/160208822

前言

不管是腾讯地图还是高德地图，现在的地图app现在做的都很复杂，地点搜索，路径规划都需要分开一步步操作，即先要搜索你需要的地点位置，查看位置，点击搜索，再跳出来路线图，操作很是繁琐。查找一些公共设施是我们生活中必不可少的，特别是到一些模式的地方，如果有一个能够快速展示这些地点并且在地图标记出来，展示路线的工具对生活来说非常方便。下面是我做的小程序的演示视频。

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

周边搜索演示视频

在这里插入图片描述

一、项目概述

1.1 项目背景

本项目是一款基于微信小程序平台开发的「附近查找」应用，旨在帮助用户快速定位周边的公共设施和生活服务场所。通过集成高德地图和腾讯地图的API服务，实现了精准的位置定位、周边搜索和路线规划功能。

1.2 核心功能

  • 多类别搜索：支持厕所、公园、商场、充电站四类场所的搜索
  • 智能地图切换：根据API调用次数自动切换高德/腾讯地图服务
  • 收藏功能：支持用户收藏常用地点（最多30条）
  • 路线规划：提供步行和驾车路线导航
  • 个性化设置：可自定义搜索范围和结果数量
  • 双视图展示：支持地图视图和列表视图切换

1.3 技术栈

  • 开发框架：微信小程序原生框架
  • 地图服务：高德地图API + 腾讯地图API
  • 数据存储：微信小程序本地缓存（wx.setStorageSync）
  • 定位服务：微信小程序位置API（wx.getLocation）

二、系统架构设计

2.1 整体架构

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   视图层 (WXML)  │    │   逻辑层 (JS)    │    │   数据层        │
├─────────────────┤    ├─────────────────┤    ├─────────────────┤
│ index.wxml      │    │ index.js        │    │ app.globalData  │
│ setting.wxml    │    │ setting.js      │    │ wx.setStorage   │
└─────────────────┘    └─────────────────┘    └─────────────────┘
          │                     │                     │
          ▼                     ▼                     ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   样式层 (WXSS)  │    │   配置层        │    │   第三方服务    │
├─────────────────┤    ├─────────────────┤    ├─────────────────┤
│ index.wxss      │    │ config.js       │    │ 高德地图API     │
│ setting.wxss    │    │ app.json        │    │ 腾讯地图API     │
└─────────────────┘    └─────────────────┘    └─────────────────┘

2.2 核心模块设计

2.2.1 地图服务模块

文件路径：app.js:1-113

该模块实现了地图API调用的智能管理，主要功能包括：

  1. API调用次数统计：constMAX_AMAP_TIMES=10;// 高德最大次数constMAX_TENCENT_TIMES=20;// 腾讯最大次数
  2. 调用策略选择：getMapStrategy(){const{amapCount,tencentCount}=this.globalData;if(amapCount<MAX_AMAP_TIMES)return’amap’;if(tencentCount<MAX_TENCENT_TIMES)return’tencent’;return’miniprogram’;// 降级方案}
  3. 每日调用次数重置：initMapRequestCount(){consttoday=newDate().toDateString();constlastDate=wx.getStorageSync(‘map_last_date’);if(lastDate!==today){wx.setStorageSync(‘map_last_date’,today);// 重置调用次数}}
2.2.2 搜索功能模块

文件路径：pages/index/index.js:1-681

该模块实现了核心的周边搜索功能，主要包括：

  1. 多源数据获取：高德地图搜索：loadNearDataWithGaode()腾讯地图搜索：loadNearDataWithWX()
  2. 距离计算：getDistance(lat1,lng1,lat2,lng2){constEARTH_RADIUS=6378137;// 球面距离计算公式returnMath.round(s);// 返回米（整数）}
  3. 智能刷新机制：isNeedRefresh(){letdis=this.getDistance(…);returndis>=app.globalData.MIN_REFRESH_DISTANCE;// 30米}
2.2.3 收藏管理模块

文件路径：pages/index/index.js:150-180

实现了收藏功能的完整生命周期管理：

toggleFavorite(e) {
  const item = e.target.dataset.item;
  const key = this.getKey(item); // 生成唯一标识
  const idx = favorites.findIndex(f => f.key === key);
  
  if (idx !== -1) {
    // 取消收藏
    favorites.splice(idx, 1);
  } else {
    // 添加收藏（最多30条）
    if (favorites.length >= 30) {
      wx.showToast({ title: '最多收藏30个', icon: 'none' });
      return;
    }
    favorites.push({ ...item, key });
  }
  app.saveFavorites(favorites); // 全局+本地存储
}

三、核心功能实现细节

3.1 定位服务实现

3.1.1 高精度定位
wx.getLocation({
  type: 'gcj02', // 国测局坐标系
  success: (res) => {
    this.setData({
      latitude: res.latitude,
      longitude: res.longitude
    });
    this.getAddress(res.latitude, res.longitude);
  }
});
3.1.2 逆地理编码

采用高德地图API进行逆地理编码，优先使用POI名称作为地址描述：

nixiangWithGaode(lat, lon) {
  wx.request({
    url: config.GAPDE_MAP_LOCAL_URL,
    data: {
      key: config.GAODE_MAP_KEY,
      location: lon + ',' + lat
    },
    success: (geoRes) => {
      const regeocodeData = geoRes.data.regeocode;
      let desc = regeocodeData.roads[0]?.name;
      // 优先使用POI名称
      if (regeocodeData.pois && regeocodeData.pois[0]) {
        const poi = regeocodeData.pois[0];
        desc = poi.name;
      }
      this.setData({ address: desc });
    }
  });
}

3.2 地图标记点处理

3.2.1 标记点数据结构
markers.push({
  id: index,
  latitude: parseFloat(lat),
  longitude: parseFloat(lng),
  iconPath: "/images/" + curType + "_mark.svg",
  width: 30,
  height: 30,
  name: item.name,
  distance: item.distance + "m",
  rating: rating,
  opentime: opentime,
  addr: item.address || "暂无地址",
  callout: {
    content: item.distance + "m",
    borderRadius: "30rpx",
    fontSize: 14,
    padding: 8,
    display: "ALWAYS",
    color: "#333",
    bgColor: "#ffffff95"
  }
});
3.2.2 地图视野自动调整
showAllMarkers() {
  const mapCtx = wx.createMapContext('map');
  const points = [
    ...markers,
    { latitude, longitude } // 当前位置
  ];
  mapCtx.includePoints({
    points: points,
    padding: [36, 20, 360, 20] // 上、右、下、左
  });
}

3.3 路线规划实现

3.3.1 步行路线
wx.request({
  url: config.WX_MAP_ROUTE_WALK_URL,
  data: {
    from: `${startLat},${startLng}`,
    to: `${endLat},${endLng}`,
    key: config.WX_MAP_KEY
  },
  success: res => {
    // 解析路线数据并绘制
  }
});
3.3.2 驾车路线（充电站专用）
if (this.data.curType == "charge") {
  driveurl = config.WX_MAP_ROUTE_DRIVE_URL;
}
3.3.3 路线绘制
this.setData({
  polyline: [{
    points: pl, // 路线坐标点
    color: this.data.brandIcon.active_color,
    width: 6,
    arrowLine: true,
    level: 'abovebuildings',
    segmentTexts: [{
      name: walkname,
      startIndex: 0,
      endIndex: pl.length - 1
    }]
  }]
});

四、性能优化策略

4.1 API调用优化

  • 智能切换机制：根据每日调用次数限制自动切换地图服务
  • 缓存策略：本地缓存搜索结果，避免重复请求
  • 请求防抖：设置30米最小刷新距离，减少不必要的API调用

4.2 内存管理

  • 全局数据复用：通过app.globalData共享全局状态
  • 及时清理：切换类别时清空路线数据（polyline: []）
  • 对象池复用：地图上下文对象复用（wx.createMapContext）

4.3 用户体验优化

  • 加载状态提示：使用wx.showToast提供操作反馈
  • 下拉刷新：支持下拉刷新获取最新数据
  • 错误处理：完善的异常捕获和错误提示机制

五、安全与权限管理

5.1 权限配置

{
  "permission": {
    "scope.userLocation": {
      "desc": "需要获取你的位置以展示附近信息"
    }
  },
  "requiredBackgroundModes": ["location"],
  "requiredPrivateInfos": ["getLocation"]
}

5.2 API密钥保护

  • 密钥存储在config.js文件中
  • 小程序发布时需配置合法域名
  • 限制API调用频率，防止密钥滥用

六、部署与发布

6.1 项目配置

  • project.config.json：项目编译配置
  • sitemap.json：搜索配置
  • app.json：小程序全局配置

6.2 发布流程

  1. 代码审查与测试
  2. 上传代码到微信公众平台
  3. 提交审核
  4. 审核通过后发布

七、问题与解决方案

7.1 常见问题

问题1：定位失败

解决方案：

  • 检查手机定位权限是否开启
  • 确保网络连接正常
  • 提供定位失败提示，并允许手动刷新
问题2：API调用次数超限

解决方案：

  • 实现智能地图切换机制
  • 提供腾讯地图小程序跳转入口
  • 提示用户次日再试
问题3：搜索结果不准确

解决方案：

  • 优先使用高德地图POI数据
  • 优化搜索半径和关键词匹配
  • 提供手动调整搜索范围功能

7.2 性能瓶颈

瓶颈1：地图渲染卡顿

优化方案：

  • 限制标记点数量（默认10个）
  • 使用矢量图标代替位图
  • 减少地图视野调整频率
瓶颈2：首次加载缓慢

优化方案：

  • 预加载常用图标资源
  • 异步加载非关键数据
  • 实现骨架屏效果

八、未来规划

8.1 功能扩展

  • 新增类别：支持更多场所类型（医院、餐厅等）
  • 语音搜索：集成微信语音识别功能
  • 分享功能：支持位置信息分享
  • 离线缓存：支持离线地图和常用地点缓存

8.2 技术升级

  • 框架升级：迁移到Taro或uni-app框架
  • 性能优化：使用WebAssembly加速地图计算
  • 数据分析：集成用户行为分析
  • AI推荐：基于用户行为提供个性化推荐

九、附录

9.1 接口文档

高德地图API
腾讯地图API

9.2 代码规范

  • 变量命名：驼峰式命名（camelCase）
  • 函数命名：动词开头（getLocation, loadNearData）
  • 注释规范：关键函数和复杂逻辑添加注释
  • 文件结构：按功能模块组织文件
* AI润色输出，仅供参考

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

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

办理咨询

相关推荐

腾讯位置服务移动地图开发：从技术底座到场景化落地的实践指南

叮小明 叮小明

在移动应用开发中，地图能力早已从辅助功能升级为核心交互入口无论是本地生活类APP的附近门店导航出行服

移动地图 2026-03-02

AI时空漫游者——基于MCP协议与AI Agent的智能地图冒险系统

作者: 求学中 发布时间: 已于20260516 23:40:57修改 来源: https:bl

征文大赛 2026-05-21

城市的情绪脉搏：基于 TMap API 的全栈情绪地图实践

作者: 领创工作室 发布时间: 最新推荐文章于20260506 22:55:57发布 来源: h

征文大赛 2026-05-21