高德地图自定义标记点marker缩放偏移问题

在使用高德地图点标记功能，自定义图标或内容时，如果对地图进行缩放，可以发现会此时图标会存在偏移，定位不准现象，如下图

造成这种现象的原因其实是对标记点的偏移量offset属性理解不准确导致，通过查阅官方文档可知，offset默认值是[0,0]，意思就是定位中心点是在图标的左上角，带着此种思维再去看刚才的效果就可以发现，其实是没有偏移的，只是图标定位点在底部，缩放时造成的视觉上错觉，如下图

我们可以看到，如果把视觉焦点聚焦在左上角[0,0]的位置，其实定位一直是准确的。造成这种误导还有个原因就是当我们使用高德默认图标时，没有设置偏移量，就认为也是默认的[0,0]，但定位没有视觉偏差，估计是高德内部做了偏移量处理。

为了符合图标底部是实际定位点的效果，可以看到图标大小是38*63，基于左上角原点，x轴偏移半个宽度，y轴偏移整个高度即可，即offset: [-19, -63]，修改后查看效果，已满足需求。

高德地图自定义标记点marker缩放偏移问题相关推荐

高德地图自定义车辆定位marker以及弹出框窗口
地图安装 npm install vue-amap --save 项目中设置高德地图安装成功后在main.js设置以下内容 import VueAMap from 'vue-amap' Vue.us ...
Android高德地图自定义Markers的例子
下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...
vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...
高德地图自定义图标的点标记Marker--初体验（二）
点标记Marker 创建一个默认图标的点标记: 创建一个自定义图标的点标记: new AMap.Marker({}) 参数说明本文以Marker为主,其他点标记方法大差不差通过上两篇文章我们已经了 ...
Android高德地图自定义Mark并实现聚合效果
Android高德地图自定义Mark并实现聚合效果起因:公司本来项目里面用到了高德地图,然后最近老板看见别人的APP里面有个聚合的这个功能,老板:"这个效果能不能实现,我也要!" ...
android高德marker添加点击,高德地图上添加marker，给每一个marker添加点击事件。...
高德地图上添加marker,给每一个marker添加点击事件. 高德地图上添加marker,给每一个marker添加点击事件.javascript var watch = [] $.ajax({ ty ...
高德地图sdk设置marker并且将设置为地图中心
高德地图sdk设置marker并且将设置为地图中心,直接在官方demo里改,授权key需要改为自己的. <!doctype html> <html> <head>& ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...

高德地图自定义标记点marker缩放偏移问题

高德地图自定义标记点marker缩放偏移问题相关推荐

最新文章

热门文章