• (高德地图)marker定位 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

        var marker = new AMap.Marker({
                icon: new AMap.Icon({
                    size:new AMap.Size(36,42),//图标大小  
                    image:"/img/loc.png"
                }),
                //这里用/img/loc.png图片的left:18;top:38指向坐标
                offset: new AMap.Pixel(-18,-38),
                position: map.gaode.map.getCenter(),
                draggable:true //点标记可拖拽
            });
      这样, 当前的经纬度位置就是箭头位置。

    顺便这里说下谷歌地图,谷歌如果用自定义图片,定位会在图片中间最底部,如下图:
         // 以下是谷歌的描述: By default, the anchor is located along the center point of the bottom of the image

    总之,根据图片不同,还是要考虑设置偏移值 不管是谷歌还是高德。

    偏移值设置了后,发现仍然还有偏差。然后继续思考。


    第二个想法:
    其实最后发现问题很简单, 在谷歌地图上,不管怎么移动 获取到的经纬度 都是我的箭头指向的位置,

    而高德不一样,当我marker拖拽结束后 触发的“拖拽结束”事件(dragend),获取的是鼠标位置的经纬度。
      
    高德文档————

        

    拖拽 我们的 marker 的时候,鼠标的位置是在 marker 上,但是并不一定在箭头上, 所以不管箭头指向哪里,获取到的永远是鼠标指向
    位置的经纬度,所以会有偏差。

    解决方法如下:

      AMap.event.addListener(marker, 'dragging', function(e){
            var lat = e.lnglat.lat,
                lng = e.lnglat.lng;
            marker.setPosition(new AMap.LngLat(lng,lat));
    
        });

          拖动过程中,获取当前鼠标的位置,然后把marker定位到鼠标的位置。

          这样就解决了这个bug。

     结论:

         不同的地图,确实是有一些不容易发现的差异,有时候看文档,也会容易漏掉什么。

         改他人bug,确实要比改自己bug麻烦一点。

     
  • 相关阅读:
    Mac Studio 的内部存储可更换但不可升级
    Mac电脑的激活日期如何查询?
    隐藏在sketch的10个实用技巧,学会就是赚到!
    Macbook如何查看是M1芯片还是inter芯片?
    如何使用Photoshop2022中的背景图层?
    如何在 Illustrator 中转换图稿?
    .NET 代码整洁手册
    django修改model内容生效
    svn add 子目录文件目录无法递归
    debian9使用rsync拉取代码
  • 原文地址:https://www.cnblogs.com/1wen/p/4745683.html
Copyright © 2020-2023  润新知