Leaflet中创建Marker时自定义divIcon发生偏移的问题及其解决方法_leaflet maker 偏移量如何设置

1.背景——Leaflet的divIcon

        leaflet官网中提到：在Leaflet中，创建Marker时，使用的图标是下面这种

        我自己感觉有点丑陋，想要做成一个圆形的。查阅了官方文档后，发现可以通过divIcon来自定义图标的样式，达到圆形的效果。

2.问题出现

        于是开始编写代码(Vue3+Typescript)，最开始的核心代码如下：

  const icon = L.divIcon({
    className: "my-div-icon",
    html: `<div style="width: 20px; height: 20px; background-color: #FA7D09; border-radius: 50%"></div>`,
  });
  L.marker([23.1192, 113.3212], {
    icon: icon,
    opacity: 0.5,
  }).addTo(map);
  L.polyline([
    [23.1192, 113.3212],
    [23.1192, 113.3312],
  ]).addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12

        为了方便看Marker的位置，我还画了一条直线，结果发现这样定义divIcon画出来的圆形并不是把圆形的中心放到Marker的位置上。
为了进一步确认Marker应该出现的正确位置，我又使用原始的Marker图标绘制了Marker

  const icon = L.divIcon({
    className: "my-div-icon",
    html: `<div style="width: 20px; height: 20px; background-color: #FA7D09; border-radius: 50%"></div>`,
  });
  L.marker([23.1192, 113.3212], {
    icon: icon,
    opacity: 0.5,
  }).addTo(map);
  L.marker([23.1192, 113.3212]).addTo(map);
  L.polyline([
    [23.1192, 113.3212],
    [23.1192, 113.3312],
  ]).addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13

        结果证明确实是我的圆形Marker位置偏移了

3.问题分析

    于是我直接F12观察dom元素的情况，发现divIcon是外层有一个div，创建divIcon时设置的参数className就是设置的它，内层的才是参数html设置的内容。
外层div:

内层的html元素是传入的参数"html"：

这里发现外层的div（就是className设置的那个div）居然比内层的div小，而且外层这个方形div的中心位置刚好和默认图标指定的一样。所以可以推断出Marker对应的是divIcon外层div中心的位置，而我们看到的内层的圆形实际上不是正确的位置，它已经偏移了。

至于偏移了多少，反复观察后可以发现，内外层div的左上方是重合的。偏移是由于它们大小不一致导致的中心不重合。

4.解决方案

        既然问题是内层div和外层的div位置不统一，那么解决起来就很简单了。比如可以把它们的大小设置成一样的，或者使用平移把内层div的中心平移到外层div那里……

4.1 解决方法1：内外层div的大小设置成一样

        官方文档中可以查到：外层的div的size可以通过参数iconSize设置，单位是px。

        那么就只需要在创建divIcon时增加一个参数iconSize就行

  const icon = L.divIcon({
    className: "my-div-icon",
    iconSize: [20, 20],
    html: `<div style="width: 20px; height: 20px; background-color: #FA7D09; border-radius: 50%"></div>`,
  });
  L.marker([23.1192, 113.3212], {
    icon: icon,
    opacity: 0.5,
  }).addTo(map);
  L.marker([23.1192, 113.3212]).addTo(map);
  L.polyline([
    [23.1192, 113.3212],
    [23.1192, 113.3312],
  ]).addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果也达到了

4.2 解决方法2：平移内层div使得内外层div中心重合

        平移内层的div，使得内外层div中心重合，效果也是一样的，就是麻烦了一点吧。

const icon = L.divIcon({
    className: "my-div-icon",
    iconSize: [12, 12],
    html: `<div style="width: 20px; height: 20px;transform:translate(${12 / 2 - 20 / 2}px,${12 / 2 - 20 / 2}px); 
    background-color: #FA7D09; border-radius: 50%"></div>`,
  });
  L.marker([23.1192, 113.3212], {
    icon: icon,
    opacity: 0.5,
  }).addTo(map);
  L.marker([23.1192, 113.3212]).addTo(map);
  L.polyline([
    [23.1192, 113.3212],
    [23.1192, 113.3312],
  ]).addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15