相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看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  # nodejs根据ip数组在百度地图中进行定位  # 在网页中插入百度地图的步骤详解  # AngularJS 与百度地图的结合实例  # 百度地图api应用标注地理位置信息(js版)  # android实现百度地图自定义弹出窗口功能  # js 调用百度地图api并在地图上进行打点添加标注  # 百度地图API应用之获取用户的具体位置  # Android下如何使用百度地图sdk  # 百度地图API之本地搜索与范围搜索  # Android百度地图定位后获取周边位置的实现代码  # 两点  # 帧数  # 自己的  # 的是  # 转换为  # 在这个  # 让他  # 也就  # 线上  # 要先  # 转化为  # 这种方法  # 开源  # 坐标点  # 计算方法  # 适合做  # 就行了  # 是因为  # 魔法门  # 就像 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 非常酷的网站设计制作软件,酷培ai教育官方网站？  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  香港服务器网站推广：SEO优化与外贸独立站搭建策略  EditPlus中的正则表达式实战(6)  如何获取PHP WAP自助建站系统源码？  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  制作企业网站建设方案,怎样建设一个公司网站？  如何用狗爹虚拟主机快速搭建网站？  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  网站建设要注意的标准 促进网站用户好感度！  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  Laravel的辅助函数有哪些_Laravel常用Helpers函数提高开发效率  如何在云虚拟主机上快速搭建个人网站？  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  微信小程序 input输入框控件详解及实例（多种示例）  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  Laravel如何使用Telescope进行调试？（安装和使用教程）  Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程  Laravel怎么清理缓存_Laravel optimize clear命令详解  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  微信推文制作网站有哪些,怎么做微信推文，急？  做企业网站制作流程,企业网站制作基本流程有哪些？  JavaScript如何实现路由_前端路由原理是什么  Laravel广播系统如何实现实时通信_Laravel Reverb与WebSockets实战教程  Laravel如何实现模型的全局作用域？（Global Scope示例）  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  如何用PHP快速搭建CMS系统？  如何在云主机上快速搭建网站？  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  长沙企业网站制作哪家好,长沙水业集团官方网站？  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  简单实现Android文件上传  如何用AI一键生成爆款短视频文案？小红书AI文案写作指令【教程】  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  在线制作视频网站免费,都有哪些好的动漫网站？  黑客如何利用漏洞与弱口令入侵网站服务器？  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  网站建设保证美观性，需要考虑的几点问题！  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  laravel怎么用DB facade执行原生SQL查询_laravel DB facade原生SQL执行方法  Swift中循环语句中的转移语句 break 和 continue  iOS中将个别页面强制横屏其他页面竖屏  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  Laravel如何创建自定义Facades？（详细步骤）  SQL查询语句优化的实用方法总结  🚀拖拽式CMS建站能否实现高效与个性化并存？