百度地图API五:大批量多次坐标转换结果返回顺序问题
2016-06-30 16:21
477 查看
前段时间发现采集到的GPS数据转换成百度坐标系后,地图上的位置偏差非常大。一查是要经过一个转换程序把gps坐标转换为百度坐标。
这里查看百度自己的坐标转换的接口说明以及演示。
http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
http://developer.baidu.com/map/jsdemo.htm#a5_3
可以看到,这个百度的坐标转换是必须在线转换的。类似通过ajax把你的坐标传递到百度的服务器,然后百度再把转换后的坐标发过来。
我们传递初始坐标系,目标坐标系,以及要转换的点的数据,百度转换后将经里返回到我们的回调函数中去。
如果我们要转换的点非常的多的话,我们就只有把我们的坐标大数组分成几组分几次来调用接口来转换。我们的每一个请求返回的时间不是固定的,可能后请求的却先返回。如何保证我们所有的坐标转换之后的结果是原始大数组一一对应的顺序呢。 我们如何知道返回的结果是第几组请求的结果呢。
如果服务器是我们自己的,我们当然有的是办法。可惜不是。
首先想到的是递归。查完一组之后在回调函数中进行下一组的查询。不过这样的话可能会有某一组请求不成功的时候会影响到后面的坐标的转换的风险。
然后决定从回调函数中来想办法。
我的实现方式把回调函数定义到一个闭包里,闭包里保存了这是第几组请求,然后回调函数可以访问到这是第几组请求。于是就可以在回调函数里求出来本次返回的数据是我们原始大数组中的第几个数据的转换结果。从而保证返回结果的有序性。
最后在回调函数中清理一下内存。callback = null。
核心代码:
至于为什么要保证有序。
我们可以看到百度转换后返回的坐标是只有坐标数据而没有一个标注点我们需要的别的数据的。而这些数据只有从原始大数组中去读取。
所以保持了原始大数组与结果大数组的一一对应,我们就可以读取到每一个i对应的坐标信息之外的数据了。比如点名。
效果图:
转载请注明出处:http://blog.csdn.net/liusaint1992/article/details/51790777
演示地址:http://runningls.com/demos/baidumap/index.html?to=translate
这里查看百度自己的坐标转换的接口说明以及演示。
http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
http://developer.baidu.com/map/jsdemo.htm#a5_3
可以看到,这个百度的坐标转换是必须在线转换的。类似通过ajax把你的坐标传递到百度的服务器,然后百度再把转换后的坐标发过来。
我们传递初始坐标系,目标坐标系,以及要转换的点的数据,百度转换后将经里返回到我们的回调函数中去。
如果我们要转换的点非常的多的话,我们就只有把我们的坐标大数组分成几组分几次来调用接口来转换。我们的每一个请求返回的时间不是固定的,可能后请求的却先返回。如何保证我们所有的坐标转换之后的结果是原始大数组一一对应的顺序呢。 我们如何知道返回的结果是第几组请求的结果呢。
如果服务器是我们自己的,我们当然有的是办法。可惜不是。
首先想到的是递归。查完一组之后在回调函数中进行下一组的查询。不过这样的话可能会有某一组请求不成功的时候会影响到后面的坐标的转换的风险。
然后决定从回调函数中来想办法。
我的实现方式把回调函数定义到一个闭包里,闭包里保存了这是第几组请求,然后回调函数可以访问到这是第几组请求。于是就可以在回调函数里求出来本次返回的数据是我们原始大数组中的第几个数据的转换结果。从而保证返回结果的有序性。
最后在回调函数中清理一下内存。callback = null。
核心代码:
</pre><pre name="code" class="javascript"> function AddOver(){ var len = oriPoints.length; var points = [];//将大数组分成小数组存放。 var ajaxId = 0;//第几组请求 var i = 0 ; var j = 0 ; var ajaxLen =0;//要发起几次请求。 //数组分装 for (; i < len; i++) { if(i%gap == 0){ ajaxId = Math.floor(i/gap); points[ajaxId] = []; } points[ajaxId].push(oriPoints[i]); } ajaxLen = points.length; //闭包和回调。 for (; j < ajaxLen; j++) { (function() { var jj = j; //回调函数,添加marker。 var callback = function(data){ var ajaxId = jj; var len = oriPoints.length,i,maker,label,theIcon; var base = ajaxId * gap; //本数组在原始大数组中的起始位。 if(data.status === 0) { var dateLen = data.points.length; for(i=0;i <dateLen;i++){ if(oriPoints[base+i].status != 1){ theIcon = icon_off; }else{ theIcon = icon_on; } marker = new BMap.Marker(data.points[i],{icon:theIcon}); label = new BMap.Label(oriPoints[base+i].name,{offset:new BMap.Size(20,0)}); marker.setLabel(label); map.addOverlay(marker); markers[base+i]=marker; endPoints[base+i]=data.points[i]; if(oriPoints.length == endPoints.length){//加载完毕。 map.setViewport(endPoints);//设置中心点 } } } callback = null;//清理内存。 jj = null; } posTrans(points[j],callback);//坐标转换新的数据图标添加到地图上。 })(); } } //坐标转换 function posTrans(points,callback){ var BdPoints = [],len = points.length,i; for (i = 0; i < len; i++) { BdPoints.push(new BMap.Point(points[i].lng,points[i].lat)) } var convertor = new BMap.Convertor(); convertor.translate(BdPoints, 1, 5, callback);//百度的坐标转换接口。 }
至于为什么要保证有序。
我们可以看到百度转换后返回的坐标是只有坐标数据而没有一个标注点我们需要的别的数据的。而这些数据只有从原始大数组中去读取。
所以保持了原始大数组与结果大数组的一一对应,我们就可以读取到每一个i对应的坐标信息之外的数据了。比如点名。
效果图:
转载请注明出处:http://blog.csdn.net/liusaint1992/article/details/51790777
演示地址:http://runningls.com/demos/baidumap/index.html?to=translate
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享