【问题标题】:Leaflet map: on click changing color of all markers传单地图:点击更改所有标记的颜色
【发布时间】:2020-05-19 11:56:06
【问题描述】:

我肯定遗漏了一些 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);
});

提前致谢!

【问题讨论】:

  • 你有一些 CodeSandbox 可以在其中产生问题吗?
  • @radulle jsfiddle.net/MattGnys/ns4bcqek 在那一刻有点乱,但我希望它能展示这个想法。我标记了我希望所有标记都默认的地方。干杯!
  • 我编辑了小提琴,请查看jsfiddle.net/vz7jmnqs/2

标签: javascript dictionary leaflet markers


【解决方案1】:

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

我编辑了小提琴,请查看link

【讨论】:

  • 好吧,在你给我看链接之前,我确实是脑子进水了,我现在明白了!非常感谢:)
  • 没问题,如果您打算拥有更多类型的标记/图标,我建议您使用插件 Leaflet Awesome Markers (github.com/lvoogdt/Leaflet.awesome-markers) 来简化样式。 leafletjs.com/plugins.html 上还有其他可用的,但我还没有全部尝试过。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-02-08
  • 2020-06-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多