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


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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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代码
2012/07/17 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
js实现聊天对话框
2020/02/08 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
餐厅销售主管职责范本
2014/02/19 职场文书
年度评优评先方案
2014/06/03 职场文书
交通工程专业推荐信
2014/09/06 职场文书
2014年消防工作总结
2014/11/21 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
志愿者事迹材料
2014/12/26 职场文书
公司员工管理制度
2015/08/04 职场文书
汽车车尾标语大全
2015/08/11 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL