高德地图纠偏 php,高德地图开发中,缩放后Marker偏移的问题

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

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

var marker = new AMap.Marker({

icon: "http://www.easyicon.net/api/resizeApi.php?id=1185658&size=32",

position: [120.1, 30.1]

});

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

百思不得其解之中，只能继续查看高德的官方文档，终于在这个页面找到了答案。

链接

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

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

高德地图纠偏 php,高德地图开发中,缩放后Marker偏移的问题相关推荐

Android开发中混淆后Gson序列化、反序列化的那些坑，androidstudio配置
为什么呢? 因为反序列化创建对象本质还是利用反射, 会根据 json 字符串的 key 作为属性名称, value 则对应属性值. 如何解决将序列化和反序列化的类排除混淆使用 @Serialize ...
uni-App获取地图address与高德地图API配合
现在使用获取地图,不需要再去安装sdk,只需要和我一样执行下方代码可以解决问题(这里会从先获取经纬度,再到经纬度转成具体的地址,最后补充定位当前位置),并且当中会提及到很多,自己开发的时候踩过的坑,谢 ...
百度、GOOGLE地图纠偏及基站查询相关说明
地图纠偏基站查询相关说明纠偏数据库分3个等级,0.1 大概500多米的偏差,0.01 保证10米内偏差,0.001 保证2米内偏差本站有谷歌0.01和0.001纠偏数据库,百度0.01纠偏数据库 ...
uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开
一.效果: 点击图片一后,会跳转到图片二页面(无需自己写图片二页面,小程序会自动打开此页面) PS:示例图中(坐标)为"天安门".( <map> 可添加多个坐标点 ) ...
基于高德地图的APP路径规划开发
一.初始化一个APP项目参见我的上一篇文章:https://blog.csdn.net/QiwzDeBLOG/article/details/84701746 前期准备: 我的项目名称:AmapTe ...
js室内地图开发_概述-室内地图 JS API | 高德地图API
室内地图 JavaScript API 简介说明: 室内地图数据对新用户暂停开放,建议您使用 Javascript API 可实现室内外一体化效果. 高德室内地图 JavaScript API,是由 ...
js室内地图开发_入门指南-室内地图 JS API | 高德地图API
快速入门将带您迅速了解高德地图室内JS API的基本使用,学习如何创建和设置地图,是您在最短时间内成为JS API的开发者. 第1步准备页面在正式开始开发地图应用之前,您需要做如下几步: 申请JS ...
一、高德地图的准备阶段-地图的页面中的显示
目录第一步:注册高德地图具体参考第二步:首先新建空白项目具体参考第三步:创建gitee仓库具体参考第四步:把你新建的项目上传到gitee仓库第五步:进入项目,NPM 方式安装使用 Loade ...
vue使用高德地图画电子围栏_Vue.js 中使用高德地图定位及渲染地图
看了github上面有集成的高德地图组件,但由于项目所要用到的不多,所以决定跟着文档写一写.运行环境是vue-cli webpack 引入高德地图一般用使用vue-cli webpack最简单粗暴的 ...
高德地图中缩放级别(zoom)和比例尺(getScalePerPixel)之间的计算关系
高德地图缩放级别(zoom) 高德开放平台的开发文档中,地图缩放级别为(4-20),如下截图: 实际测试结果为(3-19),如下截图: 高德地图比例尺(getScalePerPixel) 表示 ...

高德地图纠偏 php,高德地图开发中,缩放后Marker偏移的问题

高德地图纠偏 php,高德地图开发中,缩放后Marker偏移的问题相关推荐

最新文章

热门文章