(高德地图)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麻烦一点。

 
时间: 2024-10-06 04:29:48

(高德地图)marker定位 bug 解决总结的相关文章

Android Studio之高德地图实现定位和3D地图显示

在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德地图实现定位和3D地图显示,并标注相应位置,话不多说,先看看效果,在上代码. 效果如图: 首先注册高德成为开发者(打开高德地图,点击底部的开发者平台),创建应用,按照要求填写相应信息,如下图: 途中包含了发布版的SHA1安全码和测试版SHA1安全码,两者的值可以看  博客 :Android Studio apk打包,keystore.jks文件生成,根据keystore密钥获取SH

百度地图、高德地图的定位,搜索,模糊搜索-1

//这一段时间因为要做O2O商城,中间要用到地图的定位搜索功能,花了几天看了,其实大致的看文档的话很好解决得,主要说说者集体那遇到的麻烦吧其中定位用到了 #import <BaiduMapAPI_Search/BMKSearchComponent.h> 开启定位 //开启定位 - (void)startLocationSuccess:(SuccessBlock)success Error:(BMKErrorBlock)error { if (success) { self.successBlo

Android 高德地图的定位,周边搜索

刚弄完这两个功能,当然是结合官网例子实现的.效果还行,稍作优化便可整合到app使用.在这里做一下总结,及说明下我的思路. 刚开始上手感觉比较乱学起来也比较累,方法,类太多,直接复制各种错,还不知道为什么这么做.现在我们一起交流下实现的思路: 1:定位:这是所有地图功能实现的基础,所以不管要实现诸如周边搜索啊,导航啊什么的都需要基于定位. 如何定位:官网上例子也很详细,主要是实现几个监听,并实现方法: aMap.setLocationSource(this);// 设置定位监听 //绑定监听 ma

Unity与Android交互-Unity接入高德地图实现定位以及搜索周边的功能(使用Android Studio)详细操作

刚进公司给安排的任务就是Unity接入高德地图,算是踩了不少坑总算做出来了,抽点时间写个博客记录一下 废话不多说 先上效果图 获取定位并根据手机朝向显示周边信息            使用的Unity版本为5.5,Androad Studio 2.3.1 接下来开始讲具体操作 首先是Androad Studio的基本配置 1.创建工程,空白的就行,反正也用不到界面布局 等待创建完成 2.新建库模块: 切换到Project视图 右击你的项目 新建一个库模块-用来负责与Unity交互 当然你也可以不

android利用GPS和高德地图获取定位案例

一.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" an

高德地图之定位篇-----&gt;定位、预测天气、围栏、搜索周边、行踪轨迹

跟集成百度地图一样,首先获取KEY,获取方式(官方的截图) 这篇主要是讲解高德地图定位篇,高德地图定位篇跟高德地图篇是不同的sdk,分离开了... 来看下配置流程吧,配置是第一位的 1.从网站下载并解压得到定位包"Android_Location_V1.xx.jar". 2.开发工程中新建"libs"文件夹,将定位包拷贝到 libs 的根目录下.拷贝完成后的工程目录(以 V1.0.4 为例)如图所示: image 注意:若您在 Eclipse 上使用 adt22 版

Android高德地图的定位

看注释解析基本上OK了. 布局,权限: <!--用于进行网络定位--> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission> <!--用于访问GPS定位--> <uses-permission android:name="android.permission.ACCESS_FINE_LOCAT

高德地图定位,并计算当前定位点和目标点距离

效果图: 1.下载高德地图和定位sdk,将demo中arm文件夹和jar包复制到libs中. 2.gradle 文件 apply plugin: 'com.android.application' android { compileSdkVersion 23 buildToolsVersion "23.0.3" sourceSets{ main{ jniLibs.srcDirs=['libs'] } } defaultConfig { applicationId "myapp

Android之高德地图定位

最近在写天气预报的app,写完以后会将源码开源,今天先写app中用到的定位问题,现在定位的SDK有很多高德地图.百度地图.腾讯地图等,腾讯地图没有用过不予评价,高德地图和百度地图对比我觉得从开发平台的给的demo来说,高德地图给的demo中的代码可读性更强,模块整理的也很好,从准确性上说个人觉得高德地图的准确性比百度地图要好很多,以前做的项目中有个导航功能,刚开始老大说用百度地图说用户量大,精度应该也更大,可是事实却不是如此,我记得当时用到了地理编码和反地理编码,误差有时候有1-2公里(不知道现