ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

Преобразование гео-координат в город через API Google Maps

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для того, чтобы выяснить название вашего города, используя геолокацию, сначала вам потребуется определить географические координаты через Geolocation API. Затем примените полученные данные о широте и долготе в API обратного геокодирования. В результате вы получите подробную информацию об интересуемом вас месте. Рассмотрим пример с использованием функции navigator.geolocation совместно с безоплатным API от bigdatacloud:

JS
Скопировать код
navigator.geolocation.getCurrentPosition(async (position) => {
  const { latitude: lat, longitude: lon } = position.coords;  // Ваши координаты определены!
  const res = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lon}&localityLanguage=ru`);
  const { city } = await res.json(); // И вот название вашего города!
  console.log(`Город, в котором вы находитесь: ${city}`);
}, console.log);

Учтите, что обработка возможных ошибок, а также особенностей поддержки браузеров, — важная часть задачи.

Пройдите тест и узнайте подходит ли вам сфера IT
Пройти тест

Элегантная обработка сбоев

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

JS
Скопировать код
function errorCallback(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      console.error("Пользователь отказал в доступе к информации о его геолокации.");  // Уважайте выбор пользователя!
      break;
    case error.POSITION_UNAVAILABLE:
      console.error("Были проблемы с получением информации о местоположении.");  // Возможно, проблемы с соединением
      break;
    case error.TIMEOUT:
      console.error("Время ожидания ответа от геолокационного сервиса истекло."); // Это можно использовать для улучшения сервиса.
      break;
    case error.UNKNOWN_ERROR:
      console.error("Произошла неизвестная ошибка."); // Необходимо разобраться в причинах и устранить её.
      break;
  }
}

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

Выбор API на рынке

Существует множество альтернатив Google Maps API для обратного геокодирования. Некоторые из них предлагают уникальные функциональные возможности. Рассмотрим два примера:

  1. Geolocation-db.com API: данный сервис позволяет получить информацию о геолокации без необходимости согласия пользователя. Прекрасно подходит для случаев, когда нужно сохранить анонимность.
JS
Скопировать код
$.getJSON('https://geolocation-db.com/json/')
 .done (data => {
   console.log(data.city); // Получили название города
 });
  1. Ipinfo.io: этот сервис предоставляет информацию о местоположении по IP-адресу. Особенно эффективен, если вы хорошо разбираетесь в классах IP.
JS
Скопировать код
$.getJSON('https://ipinfo.io', data => {
  console.log(data.city);  // И название города пользователя теперь известно
});

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

Расшифровка JSON для «недоначитанных»

Данные от API обратного геокодирования поступают в формате JSON. В этом "ящике с сокровищами" вы найдёте разных компонентов адреса: как город, область и страну, так и полный адрес – formatted_address. Главное – уметь их правильно извлечь:

JS
Скопировать код
// Предположим, geocoderResult – это успешный ответ от геокодера
let city;
$.each(geocoderResult.address_components, function(i, component) {
  if (component.types[0] === "locality") {
    city = component.long_name;
    return false;  // Всё, город найден, дальше искать не нужно.
  }
});
console.log(`Название вашего города: ${city}`); // И вуаля, название города перед нами!

С помощью этого метода можно пройти по каждому компоненту адреса и выделить нужные данные о городе.

Визуализация

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

Markdown
Скопировать код
🌐 — это наша огромная планета, а вы — это маленькая точка "X":

            🌐
             X

Эта "X" символизирует ваше местоположение, которое вы определите с помощью геолокации.

Эта маленькая "X" превращается в конкретное название города!

Всё, что вам нужно, – передать координаты в API:

📍 (X) ➡️ 📘 (API) ➡️ 🏙️ (Название города)

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

Цена знания: ограничения и стоимость API

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

JS
Скопировать код
const languageParam = 'ru'; // Вы можете указать язык ответа, в данном случае, русский.

Это особенно актуально при использовании Google Maps Geocoding API: всегда проверяйте статус ответа google.maps.GeocoderStatus.OK, чтобы быть уверенным, что запрос был успешным.

Уважение к личной информации: обращение с данными пользователей

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

Полезные материалы

  1. MDN Web Docs: Geolocation API — подробное руководство по использованию геолокационного API в веб-разработке.
  2. Geolocation API Specification – W3C — официальная спецификация API геолокации.
  3. HTML Geolocation API – W3Schools — обучающий материал по реализации геолокации в HTML.
  4. Geolocation API overview | Google for Developers — документация разработчиков Google по использованию API геолокации.
  5. Overview – Nominatim Manual — руководство по API Nominatim от OpenStreetMap для бесплатного определения геопозиции.
  6. GeoNames Web Service Documentation — документация веб-сервисов GeoNames для доступа к расширенной географической информации.