Javascript 传单-鼠标悬停，单击并松开

这是我的工作示例

我想实现的是：

像现在一样在鼠标上突出显示

当我点击高亮显示的自行车路线时，我希望保持缩放功能，但当它放大到路线时，我希望保持高亮显示，直到我点击所选路线或移动地图

---

现在它可以很好地放大，但当你移动鼠标时，突出显示消失了，你不知道你点击了哪条路线。

好的，有点不对劲，但把它看作是如何完成类似任务的演示。创建一个变量

选中

，并在触发

单击

处理程序时将突出显示的功能存储在其中。现在，在

mouseout

处理程序中，您需要检查是否进行了选择，查看它是否与触发

mouseout

的层对应，如果是，请不要删除高亮显示的样式。此外，您还需要在

click

处理程序中编写一些逻辑，如果已经进行了选择，它将从中删除突出显示

代码示例：

    function highlight (layer) {
        layer.setStyle({
            weight: 5,
            dashArray: ''
        });
        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }
    }

    function dehighlight (layer) {
        if (selected === null || selected._leaflet_id !== layer._leaflet_id) {
            geojson.resetStyle(layer);
        }
    }

    // Variable to store selection
    var selected = null;

    function select (layer) {
        // See if there is already a selection
        if (selected !== null) {
            // Store for now
            var previous = selected;
        }
        map.fitBounds(layer.getBounds());
        // Set new selection
        selected = layer;
        // If there was a previous selection
        if (previous) {
            // Dehighlight previous
            dehighlight(previous);
        }
    }

    var geojson = L.geoJson(rower, {
        style: function (feature) {
            return {
                weight: 2,
                opacity: 1,
                color: feature.properties.colour,
                dashArray: 3,
            };
        },
        onEachFeature: function (feature, layer) {
        layer.on({
            'mouseover': function (e) {
                highlight(e.target);
            },
            'mouseout': function (e) {
                dehighlight(e.target);
            },
            'click': function (e) {
              select(e.target);
            }
        });
    }
}).addTo(map);

下面是一个关于Plunker的工作示例：

---

您还需要为map

click

或

moveend

或您试图完成的任何用户体验编写处理程序，并在其中检查是否有选择，然后删除其突出部分，但一旦掌握了概念，这就相当简单了

你需要展示你试图做什么，阅读更多：为了保持突出显示，我认为你可以使用类切换（

toggleClass

悬停和

addClass

单击）这几乎正是我想要的。我看到的唯一一个小“bug”是，当您将鼠标悬停在示例中的这两条蓝线上时，除非单击其中一条，否则它们将保持高亮显示（两条）。当你点击其中的一个按钮时，一个Highlight会被重置，然后该功能会正常工作。看看我的页面，我已经用你的代码刷新了它。正如您所看到的，当地图加载时，您将鼠标悬停在路线上，它们会一直高亮显示。一次只能突出显示一条路线。我希望你能理解我：）老实说，我不知道该怎么做。我明白了：D错过了，一定是忽略了什么。等我有时间的时候我会看一眼，更新我的答案和密码。太好了！慢慢来到那时，我正在研究你的代码并试图理解它。非常感谢：）事实上，我犯了一个愚蠢的错误，现在纠正了，应该能像预期的那样工作。一直以来，没有问题，也没有感谢：）不客气，这就是为什么。如果你能接受答案，如果它解决了你的问题，那么其他人也能找到一个被接受的解决方案，那就太好了。如果你真的喜欢，也欢迎你投赞成票；）见：