百度地图JavascriptApi Marker平滑移动及车头指向行径方向


Posted in Javascript onMarch 13, 2017

相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像“僵尸跳”一样,一蹦一蹦的给客户看分分钟鄙视你到不能自已。另外如果用的是有指向性图标ICON的时候,更会引来吐槽~诶诶诶,你这小车车怎么在这个立交桥转弯的时候车头向着后面呢?怎么搞得嘛你!会不会弄啊你!

所以今天参照百度大大提供的路书开源文件实现下自己的需求,记录一下以便提供参考。

一、覆盖物在获取坐标数据的同时,在坐标点之间平滑的移动

首先,之所以会出现僵尸跳的效果,是因为项目是根据实时坐标数据进行定位,所以存在一个等待新数据的过程,而对于覆盖物的坐标改变就是一个setPosition(BMap.Point)方法而已也就造成了停顿。所以目前暂且解决方案就是:让他这个覆盖物在这个等待的期间找点事情做,不要一下就直接从起点蹦到终点了,慢慢的移动过去。小碎步,平滑的的移动过去~~

怎么移动呢?此时这个事情就可以转化为已知起始点坐标,进行移动覆盖物的这么过程了,说白了就是让他覆盖物在两个点连成的这条线上多执行几次setPosition(BMap.Point),一次步子别迈那么大,只要保证在下次新坐标来之前到达就行了。

那么问题又来了,这两条线上的点我怎么知道呢? 因为获取到的经纬度坐标是球面坐标,所以要先转换为平面坐标

{BMap.Pixel}= map.getMapType().getProjection().lngLatToPoint(BMap.Point);

然后小运算下(参照路书开源文件)

/*
 *缓动效果
 *初始坐标,目标坐标,当前的步长,总的步长
 *@param{BMap.Pixel} initPos 初始平面坐标
 *@parm{BMap.Pixel} targetPos 目标平面坐标
 *@param{number} 当前帧数
 *@param {number} count 总帧数
 */
 this.linear = function (initPos, targetPos, currentCount, count) {
  var b = initPos, c = targetPos - initPos, t = currentCount,
  d = count;
  return c * t / d + b;
 }
 var x = effect(_prvePoint.x, _newPoint.x, currentCount, count),
  y = effect(_prvePoint.y, _newPoint.y, currentCount, count);

经过计算得到的是一个平面坐标pixel(x,y)。然后再将平面坐标转换为球面坐标给Marker进行定位即可。(这些方法在百度类库参考文档中都可以找得到的。魔法门: http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E5%9C%B0%E5%9B%BE%E7%B1%BB%E5%9E%8B%E7%B1%BB)

var pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));

修改覆盖物定位坐标值。当然这个地方要进行多次执行也就需要个setInterval咯  这里面的

me._em._newPointMark.setPosition(pos);

完整方法:

/**
 *小车移动
 *@param {Point} prvePoint 开始坐标(PrvePoint)
 *@param {Point} newPoint 目标点坐标
 *@param {Function} 动画效果
 *@return 无返回值
 */
 this.Move = function (prvePoint, newPoint, effect, setRotation) {
  var me = this,
    //当前帧数
    currentCount = 0,
    //初始坐标
    _prvePoint = me._projection.lngLatToPoint(prvePoint),//将球面坐标转换为平面坐标
    //获取结束点的(x,y)坐标
    _newPoint = me._projection.lngLatToPoint(newPoint),
    //两点之间要循环定位的次数
    count = me._runTime / me._intervalTimer;
    //两点之间匀速移动
    me._intervalFlag = setInterval(function () {
     //两点之间当前帧数大于总帧数的时候,则说明已经完成移动
     if (currentCount >= count) {
     clearInterval(me._intervalFlag);
     } else {
    //动画移动
    currentCount++;//计数
      var x = effect(_prvePoint.x, _newPoint.x, currentCount, count),
       y = effect(_prvePoint.y, _newPoint.y, currentCount, count);
      //根据平面坐标转化为球面坐标
    var pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));
    //设置marker角度(两点之间的距离车的角度保持一致)
     if (currentCount == 1) {
      //转换角度                     setRotation(prvePoint,newPoint, me._em);
     }
      //正在移动
    me._em._newPointMark.setPosition(pos);
   }
    }, me._intervalTimer);
    me._em._prvePoint = newPoint;
 }

值得注意的是,这里关键的就是这个count = me._runTime / me._intervalTimer; 决定了在这两个点之间要走多少个小碎步~~

这个count的由来也得根据自身项目需求计算。

1,通过控制覆盖物移动数据控制动画效果。这种方法就需要通过 速度与每次执行的时间计算得到每次执行前进的距离,然后在与两点之间的距离做商得到要执行的次数。(这种方法呢适合做历史轨迹回放这种,所有坐标信息都已经知道,一个点执行完就跳到下一个坐标,只是通过控制速度来控制动画的展示快慢)

2,通过控制平缓移动过程的总时间与每次执行间隔时间来控制动画效果。此方法就是文中的示例,直接二者做商即可得到要执行的次数。(这种方法适合做实时定位使用,因为下一次定位数据是间隔多少时间后接收,这个使我们可以控制的,所以这个平缓移动的动画过程的总时间也是可以由我们自己控制的) 

二、车头指向行径方向

这个功能其实就是改变覆盖物的旋转角度em._newPointMark.setRotation(number);

只是还是那个原因,因为得到的坐标点数据是球面坐标,所以还是要先进行转为平面坐标才好计算,然后通过三角函数tan#$%^&*( 计算后得到两个点之间的角度值。此部分没有太多个性化的逻辑操作,直接参照百度大大的就行了。

/**
 *在每个点的真实步骤中设置小车转动的角度
 *@param{BMap.Point} curPos 起点
  *@param{BMap.Point} targetPos 终点
 */
  this.setRotation = function (curPos, targetPos, em)
  {
   var me = this;
   var deg = 0;
   curPos = map.pointToPixel(curPos);
   targetPos = map.pointToPixel(targetPos);
   if (targetPos.x != curPos.x) {
    var tan = (targetPos.y - curPos.y) / (targetPos.x - curPos.x),
    atan = Math.atan(tan);
    deg = atan * 360 / (2 * Math.PI);
    if (targetPos.x < curPos.x) {
     deg = -deg + 90 + 90;
    } else {
     deg = -deg;
    }
    em._newPointMark.setRotation(-deg);
   } else {
    var disy = targetPos.y - curPos.y;
    var bias = 0;
    if (disy > 0)
     bias = -1
    else
     bias = 1
    em._newPointMark.setRotation(-bias * 90);
   }
   return;
  }

参考计算方法就得了~~~

值此两个功能的最基础的及计算方法等就这么多,其他的业务逻辑需要的逻辑代码包裹着就是自己的需求实现代码了!

效果图

百度地图JavascriptApi Marker平滑移动及车头指向行径方向

百度地图JavascriptApi Marker平滑移动及车头指向行径方向

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
利用JS实现数字增长
Jul 28 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 #Javascript
常用的几个JQuery代码片段
Mar 13 #Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 #Javascript
jquery实现表单获取短信验证码代码
Mar 13 #Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 #Javascript
VUE实现日历组件功能
Mar 13 #Javascript
JS正则表达式判断有效数实例代码
Mar 13 #Javascript
You might like
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php导入导出excel实例
2013/10/25 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
php实现中文转数字
2016/02/18 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
php图片裁剪函数
2018/10/31 PHP
限制文本字节数js代码
2007/03/06 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
django实现支付宝支付实例讲解
2019/10/17 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
小学生作文评语
2014/04/18 职场文书
绿色小区申报材料
2014/08/22 职场文书
迎国庆横幅标语
2014/10/08 职场文书
市级三好学生评语
2014/12/29 职场文书