首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >传单-鼠标,点击并取消点击

问传单-鼠标,点击并取消点击
EN

Stack Overflow用户
提问于 2015-01-28 10:02:20
回答 1查看 2.6K关注 0票数 1

下面是我的工作示例http://members.upcpoczta.pl/w.racek/mapa.html

我想达到的目标是:

  1. 像现在一样在鼠标上方突出显示,
  2. 当我点击突出显示的自行车路线,我想保持缩放功能,但当它放大到一个路线,我想继续高亮,直到我点击外部选定的路线或移动地图。

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-28 11:22:23

好吧,有点烦躁,但把它看作是如何完成这样的事情的示范。创建一个变量selected,并在触发click处理程序时将突出显示的特性存储在其中。现在,在您的mouseout处理程序中,您需要检查是否做出了选择,看看它是否与触发mouseout的层相对应,如果是,不要删除突出显示的样式。此外,您还需要在click处理程序中编写一些逻辑,如果已经做出了选择,它将从其中删除突出显示。

代码示例:

代码语言:javascript
复制
    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);

下面是柱塞的一个工作示例:http://plnkr.co/edit/fdTnA9CyJdJejiPq2q8M?p=preview

您还需要为map click或moveend或任何您想要完成的ux编写处理程序,并在其中检查是否有选择,然后删除其中的突出显示,但一旦您掌握了概念,这就相当简单了。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28189360

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档