地图缩放后Marker偏移的问题

最近在做地图开发,遇到一个小坑,记录在这里。

按照高德地图的文档,初始化Marker(图标)并将其放置到地图上,示例如下:

var marker = new AMap.Marker({
  icon: "http://www.easyicon.net/api/resizeApi.php?id=1185658&size=32",
  position: [120.1, 30.1]
});

本以为就可以这样简简单单地完成了,结果却发现当地图缩放的时候,图标会有一个偏移。例如当地图缩放比例很大的时候,某个图标在大桥左侧,放大之后却到了大桥的右侧。

百思不得其解之中,只能继续查看高德的官方文档,终于在这个页面找到了答案。
http://lbs.amap.com/api/javascript-api/guide/draw-on-map/marker-point/

原来高德对图标默认做了一个(-10,-34)的位移(以地图左上角为原点),在不设置其他数值的情况下,图标左侧边缘位于标识点左侧10px的位置上。我项目中使用的图标视觉上都是把图标左下角当做标识点的,所以当地图缩放比例很大的时候,10px对应的实际距离很大,也就是看上去会认为标识点发生了很大的向左的偏移。当地图放大后,10px对应的实际距离就小了,向左的偏移就没有那么大了。实际的感官就是标识点在放大过程中向右移动了(实质上都是偏左,只不过地图放大之后偏左没有那么多了)。

搞清楚原因之后,解决起来就很简单了,只要在AMap.Marker初始化的时候添加offset属性即可。我的图标大小为26*26px,需要对齐图标左下角,所以将offset设置成AMap.Pixel(0,-26),问题顺利解决。

时间: 2024-07-28 12:49:16

地图缩放后Marker偏移的问题的相关文章

ArcGIS API for Silverlight加载google地图(后续篇)

原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8019687)提到的加载google地图方案,因为google地址问题,看不到图了,发现是url地址变换造成的. 现将如下三个类公布出来,源码如下: using System; using System.Net; using System.Windows; using System.Windows.

(三)多点触控之自由移动缩放后的图片

在上一篇文章中,将图片的自由缩放功能基本上完成了.效果还不错.如果你还没读过,可以点击下面的链接:http://www.cnblogs.com/fuly550871915/p/4939954.html 接下来这个项目要往前走,在自由缩放的基础上实现自由移动.要用的知识点就是OnTouchListener对移动手势的监控.在写代码之前我们应该考虑下面的几个问题: (1)什么时候可以移动?当图片比屏幕大时才需要移动,如果图片在屏幕内显示,没必要移动.(2)当移动的距离达到多少时才触发移动效果?在这里

IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息

IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息 /**当获取到定位的坐标后,回调函数*/ - (void)didUpdateBMKUserLocation:(BMKUserLocation *)userLocation{ BMKCoordinateRegion region; region.center.latitude  = userLocation.location.coordinate.latitude; region.center.longitude = userLoca

GIS(四)——为js版搜狗地图添加边界+Marker和Brand的最终美化版

在<GIS(三)--优化js版搜狗地图的brand标牌样式>中,分享了一下Brand样式的修改.现在把这几次Marker和Brand的修改统一再美化一下,算作一个终极优化版吧. 这次优化的主要内容是: 为整个操作的区域,添加边界 为Marker更换动态图片 为Brand更换半透明红色图片 只显示一个Brand,每3秒切换一次 1.绘制边界 首先做第一个吧,在搜狗地图上添加边界,是一个很简单的.很基本的,但是又很人性化的一个功能.在官网的实例代码中,覆盖层的第21个示例代码<画多边形区域.

IE 11 页面缩放后再次打开不能保存之前的缩放比例

再升级完IE11后, 网页缩放后再次打开,之前更改的缩放比例又被还原成了100%. 下面是解决办法: 看图

android百度地图 添加覆盖物Marker与InfoWindow的使用

如何添加覆盖物,实现周边搜索,以及对覆盖物的点击出现介绍等效果. 效果图: 我们的需求是,当用户点击衣食住行,或者对对附近搜索是,从服务器返回数据(经纬度,商家信息,介绍等),然后动态生成覆盖物,实现上述效果.关于图片,由于手机上的内存的有限性,所有的图片下载完成都应该存入预设的缓存中,例如LruCache,然后需要的时候从缓存取,缓存没有,下载完成放入缓存:即实现所有的图片所占的内存永远不会超过缓存预设的内存值,当然了本篇的重点不是这个,我直接拿了几张图片加入我们的项目中模拟. 1.承载数据的

openLayers地图缩放的回调

//设置地图最小缩放级别为17级 map.events.register("zoomend", this, function (e) { //每次地图缩放时就会进入到这 if (map.getZoom() < 17) { //map.zoomTo(17); map.setCenter(map.getCenter(),17); } }); 原文地址:https://www.cnblogs.com/1rookie/p/8485454.html

监听Echarts 里的地图缩放事件

 // 获取百度地图实例,使用百度地图自带的控件     var bmap = myChart.getModel().getComponent('bmap').getBMap();     bmap.setMapStyle({style:'normal'});     bmap.addControl(new BMap.MapTypeControl());     bmap.addControl(new BMap.ScaleControl());      bmap.addControl(new 

【Android】高德地图 缩放级别及像素以及地图上的点转化成屏幕上的点

/** * 调节地图到正好放置查询范围的所有点 * @param centerLatLng 中心点 * @param range 查询范围(米) */  private void adjustCamera(LatLng centerLatLng,int range) {  //http://www.eoeandroid.com/blog-1107295-47621.html //当前缩放级别下的比例尺  //"每像素代表" + scale + "米" float s