Leaflet - 交互式地图 - 添加事件答案

【问题标题】：Leaflet - Interactive Map - add eventLeaflet - 交互式地图 - 添加事件
【发布时间】：2017-03-08 18:56:37
【问题描述】：

我的自行车路线示例地图存在 2 个小问题。

1.目前我的地图是这样工作的：

当您将鼠标悬停在路线上时，它会突出显示（这很好）。

当您将鼠标移出路线时，它会取消突出显示（这也很好）。

当您单击路线时，它会突出显示并缩放至要素（这很好）。

这是有问题的部分：当您单击地图上的任何位置（不是路线）时，路线应该取消突出显示，因此它看起来像没有任何突出显示的默认视图，但它不会发生。我怎样才能做到这一点？我尝试了 map.on 事件，但不确定将其放在代码中的哪个位置。

2.有什么办法可以抵消geojson的线条吗？我想把它们放在虚线下面。我尝试在我的风格中设置偏移量，但它不起作用。

这是工作地图的链接

http://mapaszlakow.eu/interactive.html

非常感谢！

【问题讨论】：

嘿，如果这个问题已经结束并且我的回答很有帮助，请标记为已接受；）

标签： javascript events leaflet

【解决方案1】：

至于您问题的第一部分，在地图上点击外部路线时取消突出显示您的路线 - 您可以使用 geojson 的 map.on(..) 函数来解决此问题：

var geojson = L.geoJson(szlaki, {
  onEachFeature: function(feature, layer) {
    layer.on({
      ...
      }
    }); 

    map.on({
      'click': function(e) {
        geojson.resetStyle(layer);
        info.update();
        selected = null;
      }
    });

  }
}).addTo(map);

codepen 示例：http://codepen.io/dagmara223/pen/LWbpqP

关于第二个问题，你试过Leaflet.PolylineOffset plugin 吗？

【讨论】：

完成了这项工作，但我怎样才能隐藏带有路线名称的信息框？出现在右上角的那个？我会调查偏移插件，谢谢！
@Voyteck 我在这里和在 codepen 中编辑了我的答案。要重置您的信息框，我在 map.on() 函数中添加了 info.update();。 pozdrowienia ;)
还有一个小bug，我会尽量解释。当您单击一条路线使其突出显示时，然后单击地图以取消突出显示它，然后将鼠标悬停在同一条路线上，它将永久突出显示。它应该只在鼠标悬停时突出显示。我希望你能得到我:)
抱歉打扰你了，有没有机会帮我解决这个小问题？ :)
当然我可以尝试帮助:) 我更新了 codepen 和上面的答案，请测试它。我添加了selected = null;