javascript - Mapbox JavaScript : Clicking on a Marker and highlighting a corresponding list

Question

我想出了如何在单击相应列表(如下)时打开标记，但我该如何做相反的事情呢？当我单击标记时，列表中相应的事件将突出显示(并保持突出显示)。另外，当我单击标记列表时，它不会保持突出显示状态。我该如何解决这个问题。提前致谢!!!

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

  });

Answer 1

您需要有某种方法从图层的 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 库的扩展版本。