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);