點擊Mapbox中的地圖標記後更改其他HTML元素？

Question

This Mapbox tutorial顯示瞭如何構建一個列表，並在列表項被點擊後讓地圖平移到地圖標記上。

JSFiddle

這是一個列表項如何處理它的Click事件基於一個特定的標記：

// Iterate through each feature layer item, build a 
// marker menu item and enable a click event that pans to + opens 
// a marker that's associated to the marker item. 
myLayer.eachLayer(function(marker) { 
    var link = info.appendChild(document.createElement('a')); 
    link.className = 'item'; 
    link.href = '#'; 

    // Populate content from each markers object. 
    link.innerHTML = marker.feature.properties.title + 
    '<br /><small>' + marker.feature.properties.description + '</small>'; 
    link.onclick = function() { 
    if (/active/.test(this.className)) { 
     this.className = this.className.replace(/active/, '').replace(/\s\s*$/, ''); 
    } else { 
     var siblings = info.getElementsByTagName('a'); 
     for (var i = 0; i < siblings.length; i++) { 
     siblings[i].className = siblings[i].className 
      .replace(/active/, '').replace(/\s\s*$/, ''); 
     }; 
     this.className += ' active'; 

     // When a menu item is clicked, animate the map to center 
     // its associated marker and open its popup. 
     map.panTo(marker.getLatLng()); 
     marker.openPopup(); 
    } 
    return false; 
    }; 
}); 

如何反向做什麼？現在，如果直接點擊標記，彈出窗口會出現，但列表項不會更新到所選標記。我不太確定如何將點擊事件綁定到與特定列表項目對應的地圖標記。

Answer 1

您只需創建一個附加到標記的"click" event的偵聽器，並在標記中保留鏈接的引用。

然後聽者會做同樣的指示爲您link.onclick>else塊的第一部分，當它重置鏈接的類，並將點擊的標記的鏈路上的"active"類。

內myLayer.eachLayer匿名函數，您可以添加link變量已經被分配後：

// Marker click interaction. 
marker.on("click", markerClickSetLinkActive); 

// Keep a reference to the link within the marker. 
marker.link = link; 

而且某處腳本文件：

// Marker click interaction function to handle the click event. 
function markerClickSetLinkActive(event) { 
    var marker = event.target; 
    var link = marker.link; 

    var siblings = info.getElementsByTagName('a'); 
    for (var i = 0; i < siblings.length; i++) { 
    siblings[i].className = siblings[i].className 
     .replace(/active/, '').replace(/\s\s*$/, ''); 
    }; 
    link.className += ' active'; 
} 

演示：http://plnkr.co/edit/oueHiszYQNXEX1oBkXkD?p=preview（使用多邊形而不是標記，但過程幾乎完全相同）。