Mapbox JavaScript：单击标记并高亮显示相应的列表

我知道如何打开一个标记时，点击相应的列表（如下），但我如何做相反的？当我单击一个标记时，列表上相应的事件将高亮显示（并保持高亮显示）。此外，当我单击标记列表时，它不会保持高亮显示。我该如何解决这个问题。提前感谢

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);

  });

var-markerList=document.getElementById（'marker-list'）；
map.featureLayer.on（'ready'，函数（e）{
map.featureLayer.eachLayer（函数（层）{
var item=markerList.appendChild（document.createElement（'li'）；
item.innerHTML=layer.toGeoJSON（）.properties.title+
“
”+layer.toGeoJSON（）.properties.description+”；
item.onclick=函数（）{
map.setView（layer.getLatLng（），17）；
layer.openPopup（）；
};
});
});
//=======================================================================
//单击标记时，将设置屏幕以使
//中间的标记
//=======================================================================
map.featureLayer.on（'click'，函数（e）{
map.panTo（e.layer.getLatLng（））；
map.setView（layer.getLatLng（），17）；
});

您需要有某种方法从图层的onclick函数中引用listitem。您可以创建这些项目的数组，并为每个项目添加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);
  });
}

---

这是一个关于普朗克的故事。我用的是传单，但实际上和用地图盒是一样的。Mapbox.js只是传单库的一个扩展版本。

巨大的帮助。我在一个数组中重新列出了我的列表项，并对setActive函数进行了修改，但当我在geojson数组中输入不同的位置时遇到了问题。你知道为什么会这样吗？没问题，我也是。检查你的新问题。