Невозможно получить маркеры карты для отображения в карте Mapbox React - PullRequest
Новая
       12

Невозможно получить маркеры карты для отображения в карте Mapbox React

1 голос
/ 30 апреля 2020

Попытка визуализировать некоторые маркеры на карте 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> 
      )
    }

1 Ответ

1 голос
/ 30 апреля 2020

Исправлено: по моему CSS, он должен был иметь .mapboxgl-маркер, а не просто маркер

...