Estoy tratando de crear una aplicación web en la que el usuario pueda hacer clic en un punto y pueda obtener la dirección más cercana al punto. Este ejemplo de la documentación se parece bastante a lo que quiero hacer, excepto que la llamada a queryRenderedFeatures no parece devolver la dirección física de ninguna función. ¿Cuál es la mejor manera de obtener la dirección física de un punto en el que se hizo clic?
Aquí está mi código:
map.on("click", (e) => { const features = map.queryRenderedFeatures(e.point); const displayProperties = [ "type", "properties", "id", "layer", "source", "sourceLayer", "state", ]; const displayFeatures = features.map((feat) => { const displayFeat = {}; displayProperties.forEach((prop) => { displayFeat[prop] = feat[prop]; }); return displayFeat; }); console.log(displayFeatures); });No puede obtener la dirección de la calle de la función queryRenderedFeatures . Sin embargo, puede obtener las coordenadas del punto en el que se hizo clic:
map.on("click", (e) => { mapClickFn(e.lngLat); });A partir de estas coordenadas, debe obtener una dirección postal. Esto se llama "geocodificación inversa" y se puede hacer usando laAPI de Mapbox :
function mapClickFn(coordinates) { const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/" + coordinates.lng + "," + coordinates.lat + ".json?access_token=" + YOUR_ACCESS_TOKEN + "&types=address"; $.get(url, function (data) { if (data.features.length > 0) { const address = data.features[0].place_name; console.log(address); } else { console.log("No address found"); } }); }El término para encontrar la dirección más cercana a un punto es "codificación geográfica inversa". Podría usarla API de Mapbox para esto, pero también hay muchos otros.
No es necesario utilizar queryRenderedFeatures aquí.