mapbox-gl：在彈出窗口中顯示反向地理編碼結果嗎？

Question

我正在使用mapbox-gl的API創建帶有彈出窗口的mapbox視圖。 我想知道如何將坐標（ birdLocation變量）顯示為地址，例如：New York，NY 11208

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(birdLocation)
            .setHTML(
                '<div class="location-popup location-title">BIRD LOCATION</div><div class="location-popup location-address">' + {birdLocation} + '</div><a href="/trips" class="location-popup location-plan">PLAN A TRIP</a>'
            )
            .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

您正在尋找的是反向地理編碼，它可以將座標（例如birdLocation ）轉換為名稱和/或地址。 這是Mapbox的反向地理編碼API ，您可以將其與任何AJAX庫一起使用以獲得結果。

披露：我在Mapbox工作