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

我已经阅读了很多SO问题和解答,并查看了the Mapbox documentation,但看不到如何从纬度/经度点反转地理编码的简单示例。 The example仅显示用于进行查询的URL,但大概有一种使用MapboxGeocoder对象的方法吗?

那么,在这里,当用户点击地图时,我将如何显示经纬度的反向地理编码?

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.
});
chntm2000 回答:如何在JavaScript中使用Mapbox地理编码API对某个点进行反向地理编码?

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

为此,您不需要包括任何Mapbox地理编码CSS / JS,我认为这些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);
  });
});
,

您可以使用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。

本文链接:https://www.f2er.com/2953701.html

大家都在问