無法讓 map 標記在 Mapbox React map 中呈現

Question

嘗試向我的地圖框 map 渲染一些標記，但似乎無法獲得要渲染的標記。 我懷疑它在 .addTo 方法中，但我想不出我還能傳入什么。我試過 this.mapContainer、document.getElementById('app')（我的主 div）和 this.map，但沒有一個他們渲染標記。 想知道這是我要傳遞的參數 into.addTo 還是其他東西。

    componentDidMount() {
      const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom
      });

      //get geojson data
      fetch('/geojson')
      .then(res => res.json())
      .then(data => {
        this.createMarkers(map, data);
      })
   }

    createMarkers(map, jsonData) {
      jsonData.features.forEach(marker => {
      let el = document.createElement('div');
      el.className = 'marker';

      new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
        .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
        .addTo(map);
      })
    }

    render() {
      return (
        <div>
          <div ref={el => this.mapContainer = el} className="mapContainer" />
        </div> 
      )
    }

Answer 1

修復：在我的 CSS 中，必須將其作為.mapboxgl-marker，而不僅僅是標記