我想出了如何在单击相应列表(如下)时打开标记,但我该如何做相反的事情呢?当我单击标记时,列表中相应的事件将突出显示(并保持突出显示)。另外,当我单击标记列表时,它不会保持突出显示状态。我该如何解决这个问题。提前致谢!!!
var markerList = document.getElementById('marker-list');
map.featureLayer.on('ready', function(e) {
map.featureLayer.eachLayer(function(layer) {
var item = markerList.appendChild(document.createElement('li'));
item.innerHTML = layer.toGeoJSON().properties.title +
'<br /><small>' + layer.toGeoJSON().properties.description + '</small>';
item.onclick = function() {
map.setView(layer.getLatLng(), 17);
layer.openPopup();
};
});
});
//=======================================================================
// when clicking the marker, the sets the screen to make the
// marker at the center
//=======================================================================
map.featureLayer.on('click', function(e) {
map.panTo(e.layer.getLatLng());
map.setView(layer.getLatLng(), 17);
});
最佳答案
您需要有某种方法从图层的 onclick 函数中引用列表项。您可以创建这些项目的数组,并向每个单独的项目添加一个 id:
var list = document.getElementById('list');
var items = [];
featureLayer.eachLayer(function(layer) {
var item = list.appendChild(document.createElement('li'));
item.innerHTML = layer.getLatLng();
item.id = layer._leaflet_id;
items.push(item);
});
然后,在图层和项目的点击事件中,有某种功能可以更改元素,例如通过添加 css 类:
featureLayer.eachLayer(function(layer) {
layer.on('click', function () {
setActive(layer._leaflet_id);
});
item.onclick = function() {
setActive(layer._leaflet_id);
});
});
function setActive(id) {
items.forEach(function(item){
var cls = (id == item.id) ? 'active' : '';
item.setAttribute('class', cls);
});
}
这是一个working example关于普朗克。我正在使用 Leaflet,但这实际上与使用 Mapbox 相同。 Mapbox.js 只是 Leaflet 库的扩展版本。
关于javascript - Mapbox JavaScript : Clicking on a Marker and highlighting a corresponding list,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26987933/