微信小程序+腾讯地图开发实现路径规划绘制


Posted in Javascript onMay 22, 2019

现象

我们想用微信小程序实现在map>组件上自定义显示导航路径,但是目前为止官方并未给出相应的方法实现,map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的,

微信小程序+腾讯地图开发实现路径规划绘制

更糟糕的是即便你内置微信小程序JavaScript SDK,它目前为止也不能给你相应的返回导航路径中所有坐标集合方法实现,不信你看介绍

微信小程序+腾讯地图开发实现路径规划绘制

解决方案

那我们只能用WebService API咯,

微信小程序+腾讯地图开发实现路径规划绘制

但是不要高兴的太早,根据文档,我们要的接口参数是酱紫的

微信小程序+腾讯地图开发实现路径规划绘制

那么我们开始写(下面是菜鸡版代码,非礼勿视)

微信小程序+腾讯地图开发实现路径规划绘制

wx.request()参数的data部分对”from”/”to”赋值不能采用惯用手法了,你会发现换了好几种方式依然不能如意,要么请求参数非法,要么语法编译又过不了,没办法,最后只能使用绝招了

微信小程序+腾讯地图开发实现路径规划绘制 

哼哼,状态稳如老狗 @_@

ok,到此为止,我们已经拿到我们想要的坐标集合了,那么接下来就是提取坐标数组,然后给polyline绘制的问题了

利用polyline绘制路径

什么都不说了,直接上代码:

/**
  * 获取当前位置标记在地图上并且利用polyline绘制路径
  */
 now_LocationTap: function () {
  var that = this
  /**
   * 初始化当前地图标记信息
   */
  wx.getLocation({
   type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
   success: function (res) {
    console.log('当前位置数据Object如下:')
    console.log(res)
    /** 开始同步数据 */
    that.setData({
     now_Location: {
      latitude: res.latitude,
      longitude: res.longitude,
     },
     /**初始化地图标记点附近车辆信息 */
     markers: [
      {
       iconPath: '/resources/wait/car.png',
       width: 70,
       height: 70,
       latitude: res.latitude,
       longitude: res.longitude
      }
     ]

    })
    console.log('当前latitude:' + res.latitude)
    console.log('当前longitude:' + res.longitude)
    console.log('当前latitude同步结果:' + that.data.now_Location.latitude)
    console.log('当前longitude同步结果:' + that.data.now_Location.longitude)

    /********************** 从腾讯地图WebService API请求导航路线坐标集合用于point_Array折线连接 */
    var now_Location = String(res.latitude + ',' + res.longitude)
    var end_Location = String(that.data.endLocation.latitude + ',' + that.data.endLocation.longitude)
    wx.request({
     url: 'https://apis.map.qq.com/ws/direction/v1/driving/', //连接接口地址

     data: {
      from: now_Location,
      to: end_Location,
      policy: 'REAL_TRAFFIC',  //结合路况的最优方式
      key: '腾讯地图KEY',

     },
     header: {
      'content-type': 'application/json' // 默认值
     },
     success: function (res) {
      console.log(res.data)
      console.log('剩余距离:' + res.data.result.routes[0].distance + '米')
      console.log('剩余时间:' + res.data.result.routes[0].duration + '分钟')
      console.log('导航路线点串如下:')
      console.log(res.data.result.routes[0].polyline)
      /** 获取返回的方案路线坐标点串并解压 */
      var coors = res.data.result.routes[0].polyline
      for (var i = 2; i < coors.length; i++)
      { coors[i] = coors[i - 2] + coors[i] / 1000000 }
      console.log('路线坐标点串解压完毕!')
      console.log('路线坐标点串解压结果如下:')
      console.log(coors);
      /** 将解压后的坐标点串进行拼接成polyline想要的样子 */
      var coors_new=[] //记住微信小程序声明一个数组这样写
      for(var j = 0; j < coors.length; j++){
      coors_new.push({
      latitude: parseFloat(coors[j]),
      longitude: parseFloat(coors[j+1])
     })
     j++;
    } 

      /* 自己想的针对polyline的points做出的格式化方案,直接实现了目标对象的字符串形式,但是一开始没注意数据类型的问题,随后试了好几种方案都不如意,最终查看了高德地图的开发方案后恍然大悟,Array.push({latitude:'',longitude:''}),简直完美!
      for (var i = 0, j = 0; i < coors.length - 2, j < coors.length/2; i++,j++)
      { 
       coors[i] = String('{latitude:'+String(coors[i])+','+'longitude:'+String(coors[i + 1])+'}') ;
       coors_new[j] = coors[i];
       i+=1;  //此处注意不+2的原因是:还有for循环的自动+1,结合起来就会达到跳2的效果
      }
      */

      console.log('路线坐标点串格式化完毕!')
      console.log('路线坐标点串格式化结果如下:')
      console.log(coors)
      console.log('已经产生新的经纬度数组coors_new如下:')
      console.log(coors_new)
      console.log('路线坐标点串解压后一共:' + coors.length + '个')
      console.log('路线坐标点串转换后一共:' + coors_new.length + '个')
      /** 开始同步路线坐标集合+剩余距离+剩余时间数据 */
      that.setData({
       now_Duration: res.data.result.routes[0].duration,  //剩余时间
       now_Distance: res.data.result.routes[0].distance,  //剩余距离
       polyline_Object: [{
        points: coors_new,//指定一系列坐标点,从数组第一项连线至最后一项
        color: "#FF0000DD",
        width: 2,
        dottedLine: true
       }],
      })
      console.log('更新points经纬度数组如下:')
      console.log(that.data.polyline_Object[0].points)
      console.log('更新polyline_Object如下:')
      console.log(that.data.polyline_Object)
      console.log('当前剩余时间 now_Duration同步结果:' + that.data.now_Duration+'分钟')
      console.log('当前剩余距离now_Distance同步结果:' + that.data.now_Distance+'米')
     }
    })

   },
  })
 }!

微信小程序+腾讯地图开发实现路径规划绘制 

至此路径规划告一段落

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 #Javascript
vue项目中mock.js的使用及基本用法
May 22 #Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 #Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 #Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 #Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 #Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 #Javascript
You might like
PHP实现把数字ID转字母ID
2013/08/12 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
js实现div色块碰撞
2020/01/16 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python re模块常见用法例举
2021/03/01 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
开工仪式策划方案
2014/05/23 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
求职推荐信范文
2015/03/27 职场文书
小学入学感言
2015/08/01 职场文书
新教师教学工作总结
2015/08/14 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS