更改 Leaflet 中标记的大小

Question

我在leaflet地图上有一个标记：

var centerMarker = L.marker(centerPoint, { title: 'unselected' }).bindLabel(schools[i][0]);
centerMarker.on('click', selectMarker);
centerMarker.addTo(map);

我希望在点击时可以改变那个标记的大小。

我知道我们可以更改图标，但我只想更改标记相同图标的大小。

- vaibhav shah

---

API中不支持此操作，您需要先删除标记，然后再添加。 - jgillich

尝试使用 setIcon，设置相同的图标但不同大小？ - flup

尝试使用 setIcon，但对我无效。有其他建议吗？ - vaibhav shah

你尝试过这个答案了吗？如果尝试过，有什么不起作用的地方？ - flup

Answer 1

您可以从标记本身获取旧图标，更改图标的大小，然后使用更改后的图标调用 setIcon：

您可以从标记本身获取旧图标，更改图标的大小，然后使用更改后的图标调用 setIcon：

var icon = centerMarker.options.icon;
icon.options.iconSize = [newwidth, newheight];
centerMarker.setIcon(icon);

- m13r

---

这个答案是有效的，但请谨慎使用，因为它会修改原始图标的大小，并且可能会影响使用相同图标的其他标记。如果您不想修改原始图标，只想更改此引脚的图标大小，您可以通过执行 const newIcon = L.icon({ iconUrl: url, iconSize: newSize, iconAnchor: newAnchor }) 创建一个全新的图标，然后 centerMarker.setIcon(newIcon)。 - Daniel Hu

感谢@DanielHu指出这一点，也许你可以在一个新的答案中解释你的方法？我不清楚如何使用这个小片段获取此图标的副本...你如何相应地设置iconUrl和iconAnchor参数？ - m13r

谢谢您的建议，我已经发布了自己的答案，它在这个问题下面。或者您可以点击这个链接：https://dev59.com/aWQo5IYBdhLWcg3wdPK8#70690009 - Daniel Hu

Answer 2

在标记上使用setIcon，提供一个新的图标，其具有相同的图像但不同的大小和锚点。

var centerPoint = L.latLng(55.4411764, 11.7928708);
var centerMarker = L.marker(centerPoint, { title: 'unselected' });
centerMarker.addTo(map);

centerMarker.on('click', function(e) {
    centerMarker.setIcon(bigIcon);
});

示例（使用较为松散的中心和阴影等设置）:

http://jsfiddle.net/pX2xn/4/

- flup

---

我更喜欢这个答案，因为通过创建一个全新的变量 bigIcon，它不会影响到 icon 的原始副本，从而可以帮助您避免一些不必要的行为。 - Daniel Hu

Answer 3

根据 @m13r 的建议，我将发布一篇新的回答，介绍如何创建一个大尺寸的图标副本。

/// Returns a scaled copy of the marker's icon.
function scaleIconForMarker(marker, enlargeFactor) {
  const iconOptions = marker.options.icon.options;

  const newIcon = L.icon({
    iconUrl: iconOptions.iconUrl,
    iconSize: multiplyPointBy(enlargeFactor, iconOptions.iconSize),
    iconAnchor: multiplyPointBy(enlargeFactor, iconOptions.iconAnchor),
  });

  return newIcon;
}

/// Helper function, for some reason, 
/// Leaflet's Point.multiplyBy(<Number> num) function is not working for me, 
/// so I had to create my own version, lol
/// refer to https://leafletjs.com/reference.html#point-multiplyby
function multiplyPointBy(factor, originalPoint) {
  const newPoint = L.point(
    originalPoint[0] * factor,
    originalPoint[1] * factor
  );

  return newPoint;
}

使用方法很简单：

  marker.on("click", function () {
    // enlarge icon of clicked marker by (2) times, other markers using the same icon won't be effected
    const largeIcon = scaleIconForMarker(marker, 2);
    marker.setIcon(largeIcon);

  });

这样，您只会放大点击的标记图标，其他标记在刷新后将保持不变。

- Daniel Hu

Answer 4

尽管这是一个老问题，但如果有人正在寻找除了已回答的选项之外的其他可能性，那么我希望你能成为一个有用的助手。

L.marker([coord.latitude, coord.longitude], {
    color: 'red',
    icon: getIcon(), 
    data: coord
}).addTo(myMap).on("click", circleClick);

function getIcon(total_dead_and_missing) {
    var icon_size = [50, 50];   //for dynamic icon size, 
    var image_url = '1.png';        //for dynamic images

    L.icon({
        iconUrl: image_url,
        shadowUrl: 'leaf-shadow.png',

        iconSize:    icon_size , // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
}

资源：https://leafletjs.com/examples/custom-icons/

（注：该链接为关于自定义图标的 Leaflet 官方示例）

- masud_moni