Question

我刚刚使用React完成了一个单页地图应用程序，用于前端Web开发课程。

基本上，我应该创建我附近的地图（为此，我使用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()
  }

这是指向我的仓库的上下文链接：Neighborhood Map

对此我将不胜感激。预先感谢！

将按钮链接到Mapbox中的场所标记的问题

0 个答案: