百度地图/高德地图大批量坐标转换结果返回顺序问…
2018-11-02 08:50:21来源:博客园 阅读 ()
转载请注明出处:https://www.cnblogs.com/Joanna-Yan/p/9894712.html
项目需求:设备采集到的GPS坐标信息,需提供实时、历史轨迹的查看功能。这些点坐标除经纬度信息外还携带了其它的信息,比如:速度、方向、解状态等。原始的GPS坐标需要转换成百度地图/高德地图坐标后才能在相应的地图上显示,否则存在较大的位置偏差。
前端人员在高德地图上显示多个点坐标信息时,发现转换后回来的坐标点没法与该坐标点的其它信息对应。一直得不到解决。
帮忙查看,调试代码。发现高德/百度地图坐标转换方法是异步的,包括js api和http请求的uri方式。
https://lbs.amap.com/api/javascript-api/reference/lnglat-to-address#t2
http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
可以看到该方法不支持传参的扩展和属性附带。所以通过将坐标的其它属性附带到坐标的异步转换方法,再通过结果一起带回来的办法是行不通了。
方法是异步的,回调函数回调就会有时间延迟。如果按照for循环顺序去提交转换,其回调函数也不是顺序执行的。
也就是说,你连续提交了1、2、3、4、5,5个GPS坐标,其回调函数的回调顺序有可能是43521,或其他,是无需的。
一次性传一组坐标进行转换,回调返回结果的坐标数组里面的顺序也是改变了的。
最后通过递归解决。再次记录下思路。
那么我们如何保证返回结果有序?
我们可以一次性转换一个GPS坐标,等回调函数回调成功后在地图上添加覆盖物,再进行下一个坐标的转换。依次保证数据顺序不会乱。
以高德地图为例,用简单的代码模拟下:
<script type="text/javascript"> var map = new AMap.Map('container', { zoom: 12, center: [121.532327,31.148761] }); var a = [1,2,3,4,5,6,7,8];//模拟坐标解状态 var OnlineLinArr = [ new AMap.LngLat(121.528,31.1509), new AMap.LngLat(121.428,31.1503), new AMap.LngLat(121.328,31.1505), new AMap.LngLat(121.468,31.1508), new AMap.LngLat(121.478,31.1506), new AMap.LngLat(121.488,31.1504), new AMap.LngLat(121.498,31.1502), new AMap.LngLat(121.418,31.1503), ]; var k = 0; function convertFrom(LngLat){ AMap.convertFrom(LngLat, 'gps', (status, result) => { console.log(status); var OnlinelngX,OnlinelatY,OnlineGDlngX,OnlineGDlatY; if(result.info === 'ok'){ var GDlinArr = result.locations; for (var i = 0; i < GDlinArr.length; i++) { OnlineGDlngX = GDlinArr[i].lng; OnlineGDlatY = GDlinArr[i].lat; } } if(status === 'complete'){ if(k < OnlineLinArr.length-1){ var j = ++k; console.log(a[j]); convertFrom(OnlineLinArr[j]); if(a[j] == 1){ ImgFunc('red.png',OnlineGDlngX,OnlineGDlatY); }else if(a[j] == 2){ ImgFunc('green.png',OnlineGDlngX,OnlineGDlatY); }else{ ImgFunc('startpoint.png',OnlineGDlngX,OnlineGDlatY); } } } }); } convertFrom(OnlineLinArr[k]); console.log(a[k]); function ImgFunc (img,x,y) { var marker = new AMap.Marker({ map:map, position:new AMap.LngLat(x, y), icon:img, // autoRotation:true, }); } </script>
如果此文对您有帮助,微信打赏我一下吧~
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:原生幻灯片封装学习
- 使用百度echarts仿雪球分时图(一) 2019-08-14
- vue集成百度富文本编辑器 2019-08-14
- 微信小程序地图开发总结 2019-08-14
- react 地图可视化 cesium 篇 2019-08-14
- 网页百度地图api,支持位置偏移 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash