百度地图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 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
JavaScript实现随机点名小程序
Oct 29 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中sprintf与printf函数用法区别解析
2014/02/17 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
three.js 入门案例详解
2018/01/23 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
男女朋友协议书
2014/04/23 职场文书
个人工作表现评价材料
2014/09/21 职场文书
高中生逃课检讨书
2014/10/10 职场文书
学生保证书
2015/01/16 职场文书
幸福来敲门观后感
2015/06/04 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
Python中super().__init__()测试以及理解
2021/12/06 Python