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函数引用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);
});

然后在你的图层和项目的click事件中有一些函数，例如通过添加一个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);
  });
}

这里是Plunker的working example。我使用的是Leaflet，但实际上与使用Mapbox相同。 Mapbox.js只是Leaflet库的扩展版本。

Mapbox JavaScript：单击标记并突出显示相应的列表

1 个答案: