Как использовать API геокодирования Mapbox в JavaScript для обратного геокодирования точки?

Я прочитал много вопросов и ответов SO и просмотрел документацию Mapbox но я не вижу простого примера того, как отменить геокодирование от точки широты / долготы. В примере показан только 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.
});

javascript mapbox mapbox-gl-js
person Phil Gyford    schedule 08.12.2019    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы можете использовать SDK Mapbox для 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];
    }
  });

Плагин MapboxGeocoder для Mapbox GL JS предназначен для предоставления нестандартного интерфейса окна поиска, а не для прямого вызова API.

person AndrewHarvey    schedule 09.12.2019
comment
Просто имейте в виду, что если вы поддерживаете старые браузеры, вам понадобится полифилл Promise. es6-обещание - хороший вариант, если вы не уверены. - person AndrewHarvey; 09.12.2019
comment
const MapboxGeocoder = require ('@ mapbox / mapbox-sdk / services / geocoding'); const geocoder = MapboxGeocoder ({accessToken: MY_ACCESS_TOKEN}); geocoder.reverseGeocoder (...) - person AndrewHarvey; 02.11.2020

arrow_upward
1
arrow_downward

Если кто-то не предложит лучшего ответа, вот что я сделал.

Для этого вам не нужно включать какие-либо элементы CSS / JS для геокодирования Mapbox, которые, как я полагаю, необходимы только для отображения виджета, который вводит пользователь, и который может отображать список результатов. :

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);
  });
});
person Phil Gyford    schedule 08.12.2019
comment
Это правильно, хотя я предоставил альтернативный ответ, используя Mapbox SDK для JS в качестве оболочки. - person AndrewHarvey; 09.12.2019
comment
Спасибо! Мы оба правы, но, хотя я придерживался своего решения, ваше, вероятно, больше то, что я искал изначально, поэтому я отметил его правильным. Было неприятно, что в документации по обратному геокодированию не было ссылки на полезный пример. - person Phil Gyford; 09.12.2019