无法获取要在Mapbox React地图中渲染的地图标记

问题描述 投票:0回答:1

[尝试向我的mapbox地图渲染一些标记,但是似乎无法获得要渲染的标记。我怀疑它在.addTo方法中,但是我无法弄清楚我还会传递什么。他们渲染标记。想知道这是否是我要传递给.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个回答
0
投票
固定:在我的CSS中,必须将其作为.mapboxgl-marker,而不仅仅是标记
© www.soinside.com 2019 - 2024. All rights reserved.