Изменить другие элементы HTML после нажатия на маркер карты в Mapbox?

В этом руководстве по Mapbox показано как создать список и переместить карту к маркеру карты после щелчка по элементу списка.

JSFiddle

Вот как элемент списка обрабатывает событие щелчка на основе определенного маркера:

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

Как можно сделать обратное? Прямо сейчас, если вы нажмете непосредственно на маркер, появится всплывающее окно, но элементы списка не будут обновлены до выбранного маркера. Я не совсем уверен, как привязать событие щелчка к маркерам карты, которые соответствуют определенному элементу списка.


javascript geolocation jquery leaflet mapbox
person rublex    schedule 13.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам просто нужно будет создать прослушиватель, прикрепленный к "click" событию вашего маркера, и держите ссылку на вашу ссылку внутри маркера.

Затем слушатель будет выполнять те же инструкции, что и первая часть вашего блока 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 (с использованием полигоны вместо маркеров, но процесс практически идентичен).

person ghybs    schedule 14.03.2016