无法在 Mapbox React 地图中渲染地图标记答案

【问题标题】：Cannot get map markers to render in Mapbox React map无法在 Mapbox React 地图中渲染地图标记
【发布时间】：2020-04-30 07:00:55
【问题描述】：

尝试向我的 mapbox 地图渲染一些标记，但似乎无法获得要渲染的标记。我怀疑它在 .addTo 方法中，但我想不出我还会传入什么。我已经尝试过 this.mapContainer、document.getElementById('app')（我的主 div）和 this.map，但没有一个他们渲染标记。想知道这是否是我传递给 .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> 
      )
    }

【问题讨论】：

标签： javascript reactjs mapbox mapbox-gl-js

【解决方案1】：

已修复：在我的 CSS 中，必须将其作为 .mapboxgl-marker，而不仅仅是标记

【讨论】：