Mapbox GL JS Переключить всплывающую проблему - PullRequest
Новая
       20

Mapbox GL JS Переключить всплывающую проблему

0 голосов
/ 16 сентября 2018

Итак, я пытался сделать свое приложение более доступным. Одна из функций находится на вкладке (фокус), чтобы отобразить всплывающее окно. Я наконец заставил его «работать» в том смысле, что на фокусе отображается всплывающее окно; однако по какой-то причине для каждого отдельного маркера отображается всплывающее окно one . 

  // Create popups and call createMarker to create the marker with the associated popup
  initializeMarkers = (venues) => {
    const allMarkers = venues.map(venue => {
      popup = new mapboxgl.Popup({ offset: 25 })
      venueId = venue.name.replace(/\s+/g, '');
      latLng = [venue.location.lng, venue.location.lat];
      popup.setHTML(
        `<div tabindex="0"> <p class="popup-text">${venue.name}</p> 
        <p class="popup-text">${venue.location.formattedAddress[0]}</p> 
        <p class="popup-text">${venue.location.formattedAddress[1]}</p></div>`
        );
      this.createMarker(latLng, popup, venueId) 
    })
  }

  // Create Mapbox markers and add correct event listeners
  createMarker = (latLng, popup, venueId) => {
    marker = new mapboxgl.Marker({color: '#40798C'})
    .setLngLat(latLng)
    .setPopup(popup)
    .addTo(map)
    marker.getElement().classList.add(`${venueId}`)
    marker.getElement().data = venueId;
    marker.getElement().addEventListener('focus', () => {
      marker.togglePopup()
    })
    marker.getElement().addEventListener('click', this.animateMarker)
    marker.getElement().setAttribute('tabindex', 0)
  }

  // Animate the markers on click
  animateMarker = (event) => {
      if(selectedMarker[0] !== event.currentTarget) {
        selectedMarker.push(event.currentTarget)
        selectedMarker[0].classList.remove("animateMarker")
        selectedMarker[0].classList.remove("changeColor")
        selectedMarker.splice(0, 1, event.currentTarget)
        event.currentTarget.classList.toggle("animateMarker")
        event.currentTarget.classList.toggle("changeColor")
        // event.stopPropagation()
      } else {
        event.currentTarget.classList.toggle("animateMarker")
        event.currentTarget.classList.toggle("changeColor")
      }
    }

На вкладке к первому маркеру показывается второе всплывающее окно маркеров: enter image description here

На вкладке снова, до следующего всплывающего окна, оно закрывает его: enter image description here

Я понимаю, что, скорее всего, он не использует экземпляр / всплывающее окно конкретного маркера, но я не уверен, почему / как это исправить. Любая помощь очень ценится!

И, для полного контекста, вот github: (пожалуйста, используйте экономно, если вам нужно, поскольку у меня очень низкий предел API, к сожалению)

https://github.com/ashleighc207/react-neighborhood-map

...