如何在 JavaScript 中使用 Mapbox Geocoding API 对一个点进行反向地理编码？

Question

我已经阅读了很多 SO 问题和答案并查看了 the Mapbox documentation but I can't see a simple example of how to reverse geocode from a latitude/longitude point. The example 只显示了 URL 用于进行查询但大概有一种方法可以使用 MapboxGeocoder 对象？

那么，在这里，当用户单击地图时，我将使用什么来显示 lat/long 的反向地理编码？

var map = new mapboxgl.Map({
  container: document.getElementsByClassName("js-map")[0],
  center: [0, 51],
  style: "mapbox://styles/mapbox/streets-v11",
  zoom: 11
});

map.on("click", function(ev) {
  // 1. Reverse geocode `ev.lngLat.lat` and `ev.lngLat.lng`
  // 2. Do something with the result.
});

Answer 1

除非有人提出更好的答案，否则这就是我所做的。

为此，您不需要 包含任何 Mapbox 地理编码 CSS/JS，我认为只需要显示用户键入的小部件进入，其中可以显示结果列表：

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css
https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js
https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js
https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js

所以，假设我们有一个 <div class="js-map"></div>，并且包含 mapbox-gl-js CSS 和 JS 文件，这里我们使用 jQuery 来执行地理编码请求：

var api_key = "YOUR-API-KEY";

var map = new mapboxgl.Map({
  container: document.getElementsByClassName("js-map")[0],
  center: [0, 51],
  style: "mapbox://styles/mapbox/streets-v11",
  zoom: 11
});

map.on("click", function(ev) {
  $.get(
    "https://api.mapbox.com/geocoding/v5/mapbox.places/" +
      ev.lngLat.lon + "," + ev.lngLat.lat + ".json?access_token=" + api_key,
    function(data) {
      console.log(data);
    }
  ).fail(function(jqXHR, textStatus, errorThrown) {
    alert("There was an error while geocoding: " + errorThrown);
  });
});

Answer 2

您可以使用 Mapbox SDK for JS，它是对其余 API 的包装。

<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>

var mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });
mapboxClient.geocoding
  .reverseGeocode({
    query: "lng,lat"
  })
  .send()
  .then(function(response) {
    if (
      response &&
      response.body &&
      response.body.features &&
      response.body.features.length
    ) {
      var feature = response.body.features[0];
    }
  });

Mapbox GL JS 的 MapboxGeocoder 插件是提供开箱即用的搜索框界面，而不是直接调用 API。

如何在 JavaScript 中使用 Mapbox Geocoding API 对一个点进行反向地理编码？

How to use Mapbox Geocoding API in JavaScript to reverse geocode a point?

javascript

mapbox

mapbox-gl-js