Проблема со связью кнопки с маркером места в Mapbox - PullRequest
Новая
       29

Проблема со связью кнопки с маркером места в Mapbox

0 голосов
/ 02 ноября 2018

Я только что закончила одностраничное картографическое приложение, используя React для курса по веб-разработке.

По сути, я должен был создать карту своего района (для этого я использовал Mapbox), получить данные о его лучших местах со стороннего сайта (Foursquare), а затем отобразить эти места в виде маркеров на карте. Каждая карта должна иметь всплывающее окно, отображающее основную информацию о месте проведения при нажатии на маркер, а также при нажатии кнопки боковой панели, связанной с этим местом. Последнее вызывает у меня проблемы - кажется, что кнопки запускают всплывающие окна случайным образом, а не при каждом нажатии

Наставник предложил мне визуализировать кнопки после полной загрузки карты и, возможно, обернуть кодовый блок внутри componentDidMount (). Я перепробовал все, но безрезультатно.

Полагаю, проблема здесь где-то здесь, но я больше не уверен. 

/* creates markers */
  createMarkers = () => {
    const allMarkers = this.state.venues
      .map(myVenue => {
/* creates popups and sets their content*/
        const popup = new mapboxgl.Popup({
          offset: 25,
          className: `${[myVenue.venue.location.lng, myVenue.venue.location.lat]}`
        })
          .setLngLat([myVenue.venue.location.lng, myVenue.venue.location.lat])
          .setHTML(
            `<h3>${myVenue.venue.name}</h3>
            <p>${myVenue.venue.categories[0].name}</p>
            <p>${myVenue.venue.location.formattedAddress[0]}</p>`
          )
        let marker = new mapboxgl.Marker({
          color: this.state.markerProps.color,
          className: myVenue.venue.name
        })
        .setLngLat([myVenue.venue.location.lng, myVenue.venue.location.lat])
        .setPopup(popup)
        .addTo(this.map)
        marker.getElement().data = myVenue.venue.name;
        marker.getElement().classList.add("animated")
        marker.getElement().addEventListener('click', this.activateMarker)
        return marker;
    })
   this.setState({ markers: allMarkers, displayedMarkers: allMarkers });
  }

  activateMarker = (e) => {
    e.preventDefault();
    e.currentTarget.classList.toggle("flash")
  }
/* ensures click on button/marker toggles the popup of location linked
to button/marker */
  handleClick(e) {
    e.preventDefault();
      let markersArray = this.props.displayedMarkers
        for (let i = 0; i < markersArray.length; i++) {
          this.props.displayedMarkers[i].getPopup()
          if (this.props.displayedMarkers[i].getPopup().options.className === e.target.dataset.buttoncoord) {
              const activeMarker = this.props.displayedMarkers[i]
              activeMarker.getElement().classList.toggle("flash")
              activeMarker.togglePopup()
          } else {
            this.props.displayedMarkers[i].getPopup()._onClickClose();
          }
      }
  }

  componentDidMount() {
        this.fetchVenues()
  }

А вот ссылка на мой репозиторий для контекста: Карта соседства

Буду признателен за любую помощь в этом. Заранее спасибо!

...