微信小程序腾讯地图根据起点终点绘制线路

最新推荐文章于 2025-04-13 00:12:29 发布

持之以恒璃

最新推荐文章于 2025-04-13 00:12:29 发布

阅读量4.6k

点赞数 2

文章标签：微信小程序前端开发地图

本文链接：https://blog.youkuaiyun.com/weixin_44676551/article/details/102860417

版权

本文详细介绍使用腾讯地图API绘制驾车路线的过程。通过解析并处理API返回的压缩坐标数据，将其转换为可在地图上显示的路线。代码示例展示了如何设置起点、终点，并在成功获取路线信息后，将路线以红色高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

map在这里插入图片描述
图片:腾讯地图绘制线路图

代码片

下面展示同样高亮的 代码片.

// An highlighted block
goto() {
    var that = this;
    var start = that.startlat + "," + that.startlng;
    var end = that.endlat + "," + that.endlng;
    demo.direction({
      mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from: start,
      to: end,
      success: function (res) {
        console.log("返回结果")
        console.log(res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        // console.log("返回串点坐标解压")
        // console.log(pl)
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
        that.setData({
          lat: pl[0].latitude,
          lng: pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 6
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });

  },