Использование координат листовки с API обратного геокодирования Google Maps

1. Убедитесь, что в вашем файле HTML и Javascript есть Leaflet.js. Воспользуйтесь кратким руководством «Начало работы», чтобы убедиться, что карта запущена и работает. В учебнике вы будете использовать функцию onMapClick(e) для установки всплывающего окна при щелчке по карте. Вы заметите, что всплывающее окно будет отображать координаты LatLng в виде строки.

2. Перейдите на облачную платформу Google и войдите или создайте учетную запись, если у вас ее еще нет. У Google есть много API на выбор, но вам понадобится API геокодирования Google Maps.

Вы должны включить это в своем профиле. Вам необходимо указать действительную информацию о кредитной карте или платеже, чтобы, если ваш запрос к API достигает определенного предела или вы используете его в коммерческих целях, он мог взимать с вас соответствующую плату.

Теперь у вас должен быть доступ к URL-адресу для получения необходимых данных. Вы захотите сделать запрос на выборку по URL-адресу, который имеет параметр запроса latlng с вашим сгенерированным ключом API. Это будет выглядеть примерно так -

https://maps.googleapis.com/maps/api/geocode/json?latlng=${e.latlng.lat},${e.latlng.lng}&result_type=${filters2}&key={authenticationKey}

3. Теперь в вашей функции onMapClick(e) вы хотите отправить запрос GET на этот URL. Мы знаем, что когда мы щелкаем точку на карте, мы получаем latlng, используя событие (e), такое как e.latlng, e.latlng.lat и e.latlng.lng.

если вы хотите, чтобы информация из результатов запроса на выборку отображалась в вашем приложении, вы должны установить ее в значение элемента или textContent. Для себя я использовал ввод в элементе формы, чтобы отобразить название города и страны для места, на которое я нажал. Вам необходимо вложить данные, возвращенные из запроса на выборку, для отображения этих конкретных данных. Мой код выглядел так -

fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${e.latlng.lat},${e.latlng.lng}&result_type=${filters2}&key=AIzaSyBzaLAk-UDpkTvnFXOZIJehm0bKglvJQpM`)
    .then(response => response.json())
    .then(data => {
        $location.value = data.results[0].formatted_address
    })

Это все, что вам нужно сделать, чтобы сопоставить широту и долготу Leaflet.js с широтой и долготой в API геокодирования Google Maps!