地图缩放后Marker偏移的问题
来源:互联网 发布:郭晶晶漂亮吗 知乎 编辑:程序博客网 时间:2024/05/16 12:21
地图缩放后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对应的实际距离就小了,向左的偏移就没有那么大了。实际的感官就是标识点在放大过程中向右移动了(实质上都是偏左,只不过地图放大之后偏左没有那么多了)。
// 实例化定位点标记 markerCustomerDW = new AMap.Marker({ icon: "http://webapi.amap.com/theme/v1.3/markers/n/loc.png", position: [ e.longitude,e.latitude], offset: {x: -12,y: -12} }); markerCustomerDW.setMap(mapCustomer.map);
搞清楚原因之后,解决起来就很简单了,只要在AMap.Marker初始化的时候添加offset属性即可。我的图标大小为26*26px,需要对齐图标左下角,所以将offset设置成AMap.Pixel(0,-26),问题顺利解决。
阅读全文
0 0
- 地图缩放后Marker偏移的问题
- 关于地图marker的聚合问题
- 基于高德地图的描点操作,监听地图缩放,展示合理数量的marker
- 百度地图api根据地图缩放等级显示不同的marker点
- 关于百度地图偏移的问题
- 关于百度地图偏移的问题
- 关于地图偏移问题的解答
- 关于百度地图偏移的问题
- Android 地图 Marker移动问题
- 高德地图自定义marker的图片定位的问题
- 高德地图自定义marker不显示的问题
- 百度地图动态添加marker的图片显示问题
- 完美解决百度地图MarkerClusterer 移动地图时,Marker 的Label 丢失的问题
- [WebGIS] 地图坐标偏移问题
- Google地图.cn与.com的偏移问题
- 地图中的偏移问题的解决和源码(C#)
- 关于谷歌地图GPS偏移问题的解决办法
- 地图组件Leaflet地图偏移问题
- ERP项目实施技术要点分析
- 高德,百度,Google地图定位偏移以及坐标系转换
- Feign基础入门及特性讲解
- spring mvc 访问静态文件出错
- 【NanoPi Duo试用体验】+ 内核更新
- 地图缩放后Marker偏移的问题
- 常用网址
- windows 10下彻底删除MySQL
- 文本数据压缩传送的几个想法
- 特别推荐BLOG(一) 程序猿DD的博客
- ListView、GridView等嵌套显示不全问题
- 清除浮动的几种方法
- phpstorm+phpstudy+XDebug 断点调试
- IP的限制访问