leaflet添加marker出现偏移,修正方法-icon

最新推荐文章于 2024-02-21 09:58:50 发布

原创最新推荐文章于 2024-02-21 09:58:50 发布 · 5.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#icon #iconAnchor

leaflet 专栏收录该内容

3 篇文章

订阅专栏

当在Leaflet地图中使用自定义marker图标时，可能会遇到图标偏移的问题。解决方法是通过调整icon的`iconAnchor`属性，将锚点设置为图标底部中心。例如，对于一个40*40的图标，正确的`iconAnchor`应设为[20, 40]，而非默认的左上角。这样做可以使图标底部中心对准marker的地理坐标，从而消除偏移。提供了一段包含完整代码的示例来展示如何正确设置。" 79246289,6995600,Rope：高效字符串处理的二叉查找树结构,"['数据结构', '字符串操作', '算法', '文本处理']

部署运行你感兴趣的模型镜像

不使用自定义icon

不使用icon属性，使用leaflet通用实例的默认图标，不发生偏移。

使用自定义icon

我们在使用leaflet给地图添加marker时自定义了marker的icon属性。

var myIcon = L.icon({...})

声明的myicon对象中使用了iconSize定义了icon图标的像素大小。

iconSize: [40, 40],

The coordinates of the “tip” of the icon (relative to its top left
corner). The icon will be aligned so that this point is at the
marker’s geographical location. Centered by default if size is
specified, also can be set in CSS with negative margins.

这里定义了一个40*40大小的图标，默认加入地图定位点的是其左上角的锚点。就是说在这个图标加入地图时，它的左上角的锚点会覆盖在地理坐标[50.505, 30.57]的定位点上，然后扩展他图标的其他像素。

我这个图标需要加入的锚点是图标的底部中心。

所以要修改锚点坐标，即将锚点从左上修改为下中。

定义icon的iconAnchor

iconAnchor: [20, 40],

为什么是20而不是-20呢？
因为我们的地图是不改变位置的，改变的是图标的位置。
所以改变的是图标的锚点位置。
讲道理我也不懂，我也觉得应该下中往左上移的话，应该是[-20,40]。
不过测试过了，是[20,40]

完整代码

L.icon代码

var myIcon = L.icon({
    iconUrl: 'my-icon.png',
    iconSize: [40, 40],
    iconAnchor: [20, 40],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);