微信小程序调用腾讯地图路线规划-注意点

新建mapApi.js:

复制代码
// utils/mapApi.js
const QQ_MAP_KEY = '********************'

// 获取两点之间的路线
const getRouteBetweenPoints = (from, to, mode = 'walking') => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `https://apis.map.qq.com/ws/direction/v1/${mode}/`,
      data: {
        from: `${from.latitude},${from.longitude}`,
        to: `${to.latitude},${to.longitude}`,
        key: QQ_MAP_KEY
      },
      success(res) {
        if (res.data.status === 0) {
          resolve(res.data.result.routes[0])
        } else {
          reject(new Error(res.data.message))
        }
      },
      fail: reject
    })
  })
}

// 解压polyline坐标点(腾讯地图返回的是压缩数据)
const decodePolyline = (polyline) => {
  const points = []
  for (let i = 2; i < polyline.length; i++) {
    polyline[i] = polyline[i - 2] + polyline[i] / 1000000
  }
  for (let j = 0; j < polyline.length; j++) {
    points.push({
      latitude: parseFloat(polyline[j].toFixed(6)),
      longitude: parseFloat(polyline[j + 1].toFixed(6))
    })
    j++
  }
  return points
}

module.exports = {
  getRouteBetweenPoints,
  decodePolyline
}

具体页面js:

复制代码
// pages/route/route.js
const mapApi = require('../../utils/mapApi.js')

Page({
  data: {
    markers: [],
    polyline: [],
    centerLat: 0,
    centerLng: 0
  },

  async onLoad() {
    // 你的5个经纬度点
    const points = [
      { latitude: 39.9042, longitude: 116.4074, title: '起点' },
      { latitude: 39.9142, longitude: 116.4174, title: '途经点1' },
      { latitude: 39.9242, longitude: 116.4274, title: '途经点2' },
      { latitude: 39.9342, longitude: 116.4374, title: '途经点3' },
      { latitude: 39.9442, longitude: 116.4474, title: '终点' }
    ]
    
    // 添加标记点
    const markers = points.map((point, index) => ({
      id: index,
      latitude: point.latitude,
      longitude: point.longitude,
      title: point.title,
      iconPath: index === 0 ? '/images/start.png' : 
                 index === points.length - 1 ? '/images/end.png' : '/images/waypoint.png',
      width: 30,
      height: 30
    }))
    
    this.setData({ markers })
    
    // 依次获取相邻两点之间的路线
        // 依次获取相邻两点之间的路线,控制并发频率为每秒3次
        let allRoutePoints = []
    
        // 简化的并发控制实现
        const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))
        
        for (let i = 0; i < points.length - 1; i++) {
          try {
            console.log(`正在获取第 ${i+1} 段路线...`)
            
            // 每处理3个请求后等待1秒
            if (i > 0 && i % 3 === 0) {
              console.log('达到并发限制,等待1秒...')
              await delay(1000)
            }
            
            const route = await mapApi.getRouteBetweenPoints(points[i], points[i + 1], 'walking')
            const decodedPoints = mapApi.decodePolyline(route.polyline)
            allRoutePoints = allRoutePoints.concat(decodedPoints)
            console.log(`第 ${i+1} 段路线获取成功,当前总点数:${allRoutePoints.length}`)
          } catch (error) {
            console.error(`获取第 ${i+1} 段路线失败:`, error)
          }
        }
    
    
    // 配置路线
    this.setData({
      polyline: [{
        points: allRoutePoints,
        color: '#2E8B57',
        width: 5,
        borderColor: '#FFF',
        borderWidth: 1,
        arrowLine: true
      }],
      centerLat: points[0].latitude,
      centerLng: points[0].longitude
    })
  }
})

注意,由于调用api service接口有并发要求,每秒调用的次数不能超过5次,所以目前设置在每秒3次:

创建key:

相关推荐
耀耀切克闹灬11 小时前
Skyline 渲染问题记录以及总结
微信小程序
小程序开发X12 小时前
2026 深圳 APP 开发甄选:技术架构搭建、全流程落地、综合选型解读
微信小程序·小程序·app开发
Kingexpand_com13 小时前
培训机构排课管理小程序设计与功能实现思路
小程序·软件开发·小程序定制开发·培训排课·培训机构·排课小程序
EatFan15 小时前
一个二维码背后的系统设计:批次生成、绑定、扫码与数据统计怎么做?
java·后端·微信小程序·二维码·qrcode
扶风ff17 小时前
练题簿企业培训方案:统一题库、在线任务与岗位考核
学习·小程序
AI行业应用研究17 小时前
会务问答机器人落地拆解:三级路由、知识库组织与防幻觉——会务小程序能自己回答参会者提问吗?
大数据·人工智能·安全·小程序·架构
盟道科技18 小时前
小程序订阅消息大规模投递实践:频控令牌池、Redis限流与失败补偿设计
分布式·算法·小程序
m0_5873830018 小时前
本地同城无人机作业接单系统源码:架构拆解与抢单调度实现
java·小程序·架构·需求分析
2501_9159090619 小时前
怎么用 FlutterFlow 把应用发布到 App Store?
android·ios·小程序·https·uni-app·iphone·webview
白远山1 天前
家政服务家政社区派单实战:调度系统架构设计与实现指南
java·开发语言·小程序·架构·需求分析