相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看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百度地图定位后获取周边位置的实现代码
# 两点
# 帧数
# 自己的
# 的是
# 转换为
# 在这个
# 让他
# 也就
# 线上
# 要先
# 转化为
# 这种方法
# 开源
# 坐标点
# 计算方法
# 适合做
# 就行了
# 是因为
# 魔法门
# 就像
相关文章:
建站之星安装步骤有哪些常见问题?
网站制作的方法有哪些,如何将自己制作的网站发布到网上?
移动端手机网站制作软件,掌上时代,移动端网站的谷歌SEO该如何做?
如何在阿里云部署织梦网站?
高性能网站服务器部署指南:稳定运行与安全配置优化方案
如何通过多用户协作模板快速搭建高效企业网站?
制作网站外包平台,自动化接单网站有哪些?
教学网站制作软件,学习*后期制作的网站有哪些?
,如何利用word制作宣传手册?
如何在阿里云虚拟服务器快速搭建网站?
上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息?
如何通过主机屋免费建站教程十分钟搭建网站?
建站之星如何防范黑客攻击与数据泄露?
教育培训网站制作流程,请问edu教育网站的域名怎么申请?
如何在万网开始建站?分步指南解析
广州商城建站系统开发成本与周期如何控制?
制作网站公司那家好,网络公司是做什么的?
建站之星后台管理系统如何操作?
建站之星代理商如何保障技术支持与售后服务?
建站之星3.0如何解决常见操作问题?
桂林网站制作公司有哪些,桂林马拉松怎么报名?
如何在橙子建站中快速调整背景颜色?
南宁网站建设制作定制,南宁网站建设可以定制吗?
高防服务器租用如何选择配置与防御等级?
深圳 网站制作,深圳招聘网站哪个比较好一点啊?
如何在阿里云高效完成企业建站全流程?
手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站?
如何选择高效可靠的多用户建站源码资源?
微信小程序 input输入框控件详解及实例(多种示例)
jQuery 常见小例汇总
高端企业智能建站程序:SEO优化与响应式模板定制开发
建站中国官网:模板定制+SEO优化+建站流程一站式指南
黑客入侵网站服务器的常见手法有哪些?
网站好制作吗知乎,网站开发好学吗?有什么技巧?
如何在建站之星网店版论坛获取技术支持?
如何通过云梦建站系统实现SEO快速优化?
厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办?
实例解析Array和String方法
如何在阿里云域名上完成建站全流程?
如何快速查询域名建站关键信息?
nginx修改上传文件大小限制的方法
佛山企业网站制作公司有哪些,沟通100网上服务官网?
如何在西部数码注册域名并快速搭建网站?
建站之星代理平台如何选择最佳方案?
山东云建站价格为何差异显著?
文字头像制作网站推荐软件,醒图能自动配文字吗?
建站之星下载版如何获取与安装?
Android自定义listview布局实现上拉加载下拉刷新功能
威客平台建站流程解析:高效搭建教程与设计优化方案
相册网站制作软件,图片上的网址怎么复制?
*请认真填写需求信息,我们会在24小时内与您取得联系。