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）转换为名称和/或地址。您可以在任何AJAX库中使用Mapbox's API for reverse geocoding来获得结果。

披露：我在Mapbox工作

mapbox-gl：在弹出窗口中显示反向地理编码结果？

1 个答案: