时间戳

首页 > 解决方案 > 传单地图：点击更改所有标记的颜色

javascript - 传单地图：点击更改所有标记的颜色

问题描述

我肯定错过了一些 js 语法来实现这一点，但硬谷歌搜索并没有让我得出任何结论。

我想在点击时切换标记颜色。我将精灵预定义为变量“greenIcon”和“defaultIcon”。一切都适用于单个标记，我可以用这个来回切换它：

.on('click', function(e) {
if (this.getIcon() != greenIcon) {
  this.setIcon(greenIcon);
} else {
  this.setIcon(defaultIcon);
}
})

就如此容易。我想要实现的是，单击一个标记，其他标记更改为“defaultIcon”，并且只有这个切换。除了“这个”，还有什么我可以使用的吗？在显示的例子中？比如，all.setIcon(defaultIcon)？

我的标记属性在 var 数组中定义，名为“points”：

    var points = [
    {latlng: [54.351194, 18.654101], title: "F-225", name: "Marker 1"},
    {latlng: [54.351194, 18.658101], title: "F-226", name: "Marker 2",
];
points.forEach(function(p) {
    L.marker(p.latlng, {
        title: p.title, riseOnHover: true
    })
    .addTo(map)
    .on('click', function(e) {
    // all.setIcon(defaultIcon);
  })
    .bindPopup(popupName);
});

提前致谢！

标签： javascriptdictionaryleafletmarkers

解决方案

添加标记时，将它们推送到数组中。const markers = []在开始的某个地方，than markers.push(L.marker(...如果您向您的点添加某种唯一键，您可以通过遍历数组或单个数组来操作所有内容。您也可以访问当前的一个this。

我编辑了小提琴，请检查链接。

推荐阅读