(高德地图)marker定位 bug 解决总结
2015-08-20 16:45
429 查看
项目背景:
一个项目bug,项目中用到高德地图,默认打开页面会生成一个marker(下图红色icon),然后用户拖动marker到想要的位置,并且保存。
用户反映定位不准确,在当前页面编辑的位置,到后台打开位置就会有偏移。
因为后台打开时候是根据经纬度生成的marker,经过检查最终确定是前台页面,拖动marker定位获取经纬度那里出的问题。
这里不得不说下个人情况,此项目是他人开发,而开发人员已经不在公司,bug转发给我了。自己之前也没怎么使用过高德,主要使用的是谷歌地图和mapbox。
在修改这个bug的时候,思绪会受谷歌api一些影响,因为一直觉得他们的api都差不多。
现在我打开自己的页面,然后拖动marker,拖动结束我会打印一下经纬度,然后把这个经纬度复制下来,并在高德的官方地图上去搜索获取到的这个经纬度。
结果确实一直都是有偏差的,而且还偏差值每次都不同。
第一个想法:
看了下代码,发现在生成marker的时候,并没有对自定义的icon(红色图标)设置偏移,为什么要设置偏移呢,因为我们在用这个图标定位的时候,
是认为这个图标的底部箭头指向的位置是我们要的位置。如下图——
如果是用高德自带的图标,图标的箭头就是指向的当前位置。而如果用自定义图标的话,默认位置是定义在图片画布的左上角也就是left:0;top:0;如下图——
所以必须要为自定义图标设置偏移值,上图的图标大小是宽36px高42px,箭头的位置是left:18px;top:38px,所以下面设置offset偏移是-18,-38
拖动过程中,获取当前鼠标的位置,然后把marker定位到鼠标的位置。
这样就解决了这个bug。
结论:
不同的地图,确实是有一些不容易发现的差异,有时候看文档,也会容易漏掉什么。
改他人bug,确实要比改自己bug麻烦一点。
一个项目bug,项目中用到高德地图,默认打开页面会生成一个marker(下图红色icon),然后用户拖动marker到想要的位置,并且保存。
用户反映定位不准确,在当前页面编辑的位置,到后台打开位置就会有偏移。
因为后台打开时候是根据经纬度生成的marker,经过检查最终确定是前台页面,拖动marker定位获取经纬度那里出的问题。
这里不得不说下个人情况,此项目是他人开发,而开发人员已经不在公司,bug转发给我了。自己之前也没怎么使用过高德,主要使用的是谷歌地图和mapbox。
在修改这个bug的时候,思绪会受谷歌api一些影响,因为一直觉得他们的api都差不多。
现在我打开自己的页面,然后拖动marker,拖动结束我会打印一下经纬度,然后把这个经纬度复制下来,并在高德的官方地图上去搜索获取到的这个经纬度。
结果确实一直都是有偏差的,而且还偏差值每次都不同。
第一个想法:
看了下代码,发现在生成marker的时候,并没有对自定义的icon(红色图标)设置偏移,为什么要设置偏移呢,因为我们在用这个图标定位的时候,
是认为这个图标的底部箭头指向的位置是我们要的位置。如下图——
如果是用高德自带的图标,图标的箭头就是指向的当前位置。而如果用自定义图标的话,默认位置是定义在图片画布的左上角也就是left:0;top:0;如下图——
所以必须要为自定义图标设置偏移值,上图的图标大小是宽36px高42px,箭头的位置是left:18px;top:38px,所以下面设置offset偏移是-18,-38
varmarker=newAMap.Marker({ icon:newAMap.Icon({ size:newAMap.Size(36,42),//图标大小 image:"/img/loc.png" }), //这里用/img/loc.png图片的left:18;top:38指向坐标 offset:newAMap.Pixel(-18,-38), position:map.gaode.map.getCenter(), draggable:true//点标记可拖拽 });
这样,当前的经纬度位置就是箭头位置。 顺便这里说下谷歌地图,谷歌如果用自定义图片,定位会在图片中间最底部,如下图://以下是谷歌的描述:Bydefault,theanchorislocatedalongthecenterpointofthebottomoftheimage 总之,根据图片不同,还是要考虑设置偏移值不管是谷歌还是高德。 偏移值设置了后,发现仍然还有偏差。然后继续思考。 第二个想法: 其实最后发现问题很简单,在谷歌地图上,不管怎么移动获取到的经纬度都是我的箭头指向的位置, 而高德不一样,当我marker拖拽结束后触发的“拖拽结束”事件(dragend),获取的是鼠标位置的经纬度。 高德文档———— 拖拽我们的marker的时候,鼠标的位置是在marker上,但是并不一定在箭头上,所以不管箭头指向哪里,获取到的永远是鼠标指向 位置的经纬度,所以会有偏差。 解决方法如下:
AMap.event.addListener(marker,'dragging',function(e){ varlat=e.lnglat.lat, lng=e.lnglat.lng; marker.setPosition(newAMap.LngLat(lng,lat)); });
拖动过程中,获取当前鼠标的位置,然后把marker定位到鼠标的位置。
这样就解决了这个bug。
结论:
不同的地图,确实是有一些不容易发现的差异,有时候看文档,也会容易漏掉什么。
改他人bug,确实要比改自己bug麻烦一点。
相关文章推荐
- 18. 树的子结构
- android selecter 生成插件
- HDOJ A strange lift(Dijkstra最短路问题)
- HDU 2504 又见GCD
- C结构体里的成员数组和指针(特别是零长数组说明)
- 虚拟化--021 vSphere HA 5.x系列的高级参数及详细用途说明
- UVA 10791 Minimum Sum LCM
- Android省市区三级联动滚轮选择——Cascade_Master
- 黑马程序员-----IO流(1)字符流
- 45 个非常有用的 Oracle 查询语句
- android OpenGL ES开发之前世今生
- 【LeetCode】(94)Binary Tree Inorder Traversal(Easy)
- B树、B-树、B+树、B*树
- mac系统下命令编译android ndk项目
- 17. 合并两个排序的链表
- 虚拟化--020 vsphere 命令收集
- POJ 2761(求区间第k小值)
- 获取hw_device_t
- OC可变字符串NSMutableString详解
- 台湾国立大学机器学习基石.听课笔记(第十二讲):Nonlinear Transformation