重複的圖層/顯示permanantly點擊

我開始學習如何使用傳單。我正在嘗試使用標記創建地圖。如果你將它們懸停，他們應該顯示一條路線。如果鼠標離開標記，路線應該被刪除。（此部分有效）當您點擊標記時，即使鼠標離開標記，路線仍應保留在地圖上。因此，我需要複製路徑圖層，以便鼠標離開標記時不會被刪除。或者有更好的方法，我不知道。重複的圖層/顯示permanantly點擊

function Route() { 
    DirectionsLayerLong = omnivore.gpx('GPX/ Route_long.gpx'); 
    DirectionsLayerLong.on('ready', function() { 
    this.setStyle(style_long); 
    }); 
    DirectionsLayerShort = omnivore.gpx('GPX/Route_short.gpx'); 
    DirectionsLayerShort.on('ready', function() { 
    this.setStyle(style_short); 
    }); 
    return DirectionsLayer = L.featureGroup([DirectionsLayerLong, DirectionsLayerShort]); 
}; 
var Marker = L.marker([50, -100], { 
    icon: iconfu 
}).addTo(map); 
Marker.on('mouseover', function(e) { 
    Route(); 
    DirectionsLayer.addTo(map); 
}); 
Marker.on('mouseout', function(e) { 
    DirectionsLayer.remove() 
}); 
Marker.on('click', function(e) { 
    DirectionsPermaLayer.remove(); 
    Route(); 
    DirectionsPermaLayer = DirectionsLayer; 
    DirectionsPermaLayer.addTo(map); 
});

我可以簡單地使用omnivore與另一個變量，但我想重用該函數。

來源

2016-03-28 Hedaja

最簡單的解決方案只是刪除mouseoutevent listener當你標記點擊：

Marker.on('click', function(e) { 
    Marker.off('mouseout'); 
});

克隆你的路線層將是一個更復雜一些（更不用提不必要的，如果刪除事件偵聽器解決了你的問題），但值得探討的是如何做到這一點。首先，爲什麼你不能創建使用DirectionsPermaLayer = DirectionsLayer一份簡明的解釋可以w3schools發現：

對象是可變的：它們都通過引用解決，而不是價值。

如果y是一個對象，下面的語句不會產生 y的副本：
var x = y; // This will not create a copy of y. 
對象x不是y的副本。它是 y。 x和y都指向同一個對象的。

對y的任何更改也會更改x，因爲x和y是相同的對象。

有many ways去了解cloning an object在Javascript，但我懷疑這些最不會克隆傳單層工作，因爲所有的宣傳單張的內部ID將與對象一起復制，從而導致不可預知的行爲。最好的策略很可能是使用方法DirectionsLayerShort和DirectionsLayerLong轉換爲GeoJSON的，然後讀回使用L.geoJson：

var Short2 = L.geoJson(DirectionsLayerShort.toGeoJSON()).setStyle(style_short); 
var Long2 = L.geoJson(DirectionsLayerLong.toGeoJSON()).setStyle(style_long); 
var Directions2 = L.featureGroup([Long2, Short2]).addTo(map);

這可能需要你的代碼的一個小重構，但它應該做的工作。

來源

2016-03-29 01:42:18 nathansnider

感謝您的回答。我剛學會如何停用事件監聽器。但這會造成問題。我沒有提到的是，我有多個標記，懸停功能應該可用，即使在我點擊第一個標記後。每次單擊一個標記時，它會永久突出顯示此路線，直到您單擊下一個標記。在此期間，您仍然可以將鼠標懸停在其他標記上並查看這些路線。 – Hedaja

我重新編寫了一段代碼，現在就使用你的想法進行復制。再次感謝。 – Hedaja

重複的圖層/顯示permanantly點擊

回答

相關問題