React + mapbox-gl：包含弹出窗口？

Question

我在React中使用mapbox-gl，虽然mapbox-gl工作正常，但我无法弄清楚如何整合mapbox-gl的弹出窗口。我有let Popup函数，但不知道如何实现它。

renderMap() { 
    if (this.props.bird.location) { 
     let birdLocation = this.props.bird.location; 
     let map = new mapboxgl.Map({ 
      container: 'mapbox-container', 
      style: config.mapbox.style, 
      center: birdLocation, 
      zoom: 13, 
      interactive: false, 
      preserveDrawingBuffer: true 
     }); 
     let popup = new mapboxgl.Popup({ 
      setLngLat: [-96, 37.8], 
      setHTML: '<h1>Hello World!</h1>', 
      addTo: map 
     }); 

     map.on('load', function() { 
      map.addSource("points", { 
       "type": "geojson", 
       "data": { 
        "type": "FeatureCollection", 
        "features": [{ 
         "type": "Feature", 
         "geometry": { 
          "type": "Point", 
          "coordinates": birdLocation 
         }, 
         "properties": { 
          "icon": "dark-map-pin" 
         } 
        }] 
       } 
      }); 

      map.addLayer({ 
       "id": "points", 
       "type": "symbol", 
       "source": "points", 
       "layout": { 
        "icon-image": "{icon}" 
       } 
      }); 
     }); 
    } 
}, 

Answer 1

想通了。

let popup = new mapboxgl.Popup() 
    .setLngLat() 
    .setHTML(
     '<div>lorem ipsum blah blah</div>' 
    ) 
    .addTo(map);