Как изменить карту Mapbox на основе координат, используя вместо этого почтовый индекс? - PullRequest
Новая
       8

Как изменить карту Mapbox на основе координат, используя вместо этого почтовый индекс?

1 голос
/ 03 марта 2020

Я создал карту с маркером местоположения, основанным на географических координатах.

Теперь меня просят использовать вместо этого почтовые индексы Великобритании. Как бы мне пришлось изменить деталь JS, чтобы расположить ее по центру и поместить маркер в почтовый индекс (ZIP)? Спасибо за любую помощь здесь.

CSS: 

<style>
.marker {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%238200b9;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Emarker%3C/title%3E%3Cpath class='a' d='M20,0A13.3353,13.3353,0,0,0,8.4524,19.9988L20,40,31.5476,19.9988h0A13.3354,13.3354,0,0,0,20,0Zm0,18.9166a5.6134,5.6134,0,1,1,5.6134-5.6134A5.6134,5.6134,0,0,1,20,18.9166Z'/%3E%3C/svg%3E");  
background-size: cover;
  width: 46px; height: 46px; margin-top: -23px;
  }
</style>

HTML: 

<div id='map' style='width: 100%; height: 500px;'></div>

JS: 

<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFya3VzYXR0cnVlIiwiYSI6ImNrNjk2NXB1ZzBhOWozdW45aHhxZ2hzODEifQ.ZWWxJP61cYov_9EN9PrKdQ';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-74.5, 40], // starting position
    zoom: 16 // starting zoom
  });
  // Add zoom and rotation controls
  map.addControl(new mapboxgl.NavigationControl());
  // Add marker
  // Add marker
   var el = document.createElement('div');
  el.className = 'marker';
  var marker = new mapboxgl.Marker(el)
  .setLngLat([-74.5, 40])
  .addTo(map);
  </script>

Ответы [ 2 ]

1 голос
/ 13 марта 2020

Поскольку вы уже используете Mapbox GL JS для отображения своей карты, я рекомендую использовать API геокодирования Mapbox , чтобы получить широту и долготу определенного почтового индекса. Это руководство от Mapbox дает отличный концептуальный обзор того, что такое геокодирование и как оно работает. Для вашего конкретного случая использования наиболее актуальным является тип запроса прямого геокодирования .

Например, предположим, что вы хотите найти географические c координаты для почтового индекса Великобритании "EC1A 1BB". Вы можете сделать следующий запрос к конечной точке прямого геокодирования Mapbox: 

https://api.mapbox.com/geocoding/v5/mapbox.places/EC1A%201BB.json?access_token=YOUR_MAPBOX_ACCESS_TOKEN&autocomplete=true

, заменив YOUR_MAPBOX_ACCESS_TOKEN тем же маркером доступа, который вы используете для загрузки своей карты GL JS. Если вы посмотрите на тело ответа на этот запрос, скопировав URL-адрес запроса в браузер, то увидите, что он возвращает place_name: "EC1A 1BB, London, Greater London, England, United Kingdom" и координаты центра области почтового индекса: -0.1120425, 51.5245653.

Таким образом, вы можете проанализировать тело ответа на этот запрос, чтобы получить [longitude, latitude] из geometry.coordinates, сохранить координаты в переменной coordinates и использовать эту переменную для позиционирования маркера на карте: 

var el = document.createElement('div');
el.className = 'marker';
var marker = new mapboxgl.Marker(el)
  .setLngLat(coordinates)
  .addTo(map);
1 голос
/ 03 марта 2020

Вам нужно геокодировать местоположение. Так что для этого вам понадобится еще один API. Быстрый поиск в Google показывает, что LocationIQ выглядит довольно хорошо, но я уверен, что есть тонны. Что вы сделаете, это сделаете вызов API для вашей службы геолокации с почтовым индексом, и ответ должен содержать lat и lng, которые затем могут использоваться в вашей функции .setLngLat.

...