Question

实际上，我正在将（Wordpress / Bootstrap 4）网站上的地图从传单0.7更新为传单1.5。在我的网站上，我展示了许多Mountainbike游览，每个游览都关联了一个GPX文件。我想在一张地图上显示所有这些旅行，每个旅行都有一个显示其他信息的BS模式对话框。

当用户单击其中一个GPX轨道时，我希望它更改要突出显示的颜色并显示“模态”窗口。当用户单击另一GPX-Track时，应突出显示该GPX-Track，并显示其“模态”对话框-先前突出显示的GPX-Track应该返回其先前的样式。

我设法解决了除最后一个步骤以外的几乎所有步骤：一旦突出显示，曲目将保持突出显示状态，并且不会返回到先前状态。

例如，这是我的工作代码：

var MyMTBtour = omnivore.gpx('https://.../MyMTBtour.gpx').addTo(map)

        .on('click', function () {
        map.fitBounds(MyMTBtour.getBounds());
        MyMTBtour.setStyle({
            "color": "orange",
            weight: 10,
            "opacity": 0.8
            });
        });

        MyMTBtour.on('ready', function () {
        MyMTBtour.eachLayer(function (line) {
            line.setStyle({
                color: 'yellow',
                weight: 5,
                "opacity": 0.5
                });
            });
        });

        MyMTBtour.on('click', function(e) {
        $('#MyMTBtour_Modal').modal('show');
        });

        map.on('click', function(e) {
        $('#MyMTBtour_Modal').modal('hide');
        });

在此地图的先前版本（基于Leaflet 0.7）中，我设法使用此功能实现了该行为：

map.on('click', function () {
    MyMTBtour.eachLayer(function (line) {
        line.setStyle({
            color: 'yellow',
            weight: 5
        });
    });
 });

但是，使用Leaflet 1.5不再起作用（API更改了吗？）。我还尝试将所需的样式更改绑定到modal（hide）事件，但是我没有设法使其生效。

任何帮助将不胜感激。谢谢！

传单：单击更改GPX的线条样式

0 个答案: