Улучшенная навигация к аэропортам,Улучшенная навигация к аэропортам

Аэропорты — это крупные многотерминальные комплексы, и точная навигация критически важна для своевременного прибытия и отправления пассажиров. API геокодирования Google Карт обычно возвращает координаты (широта/долгота), которые в большинстве случаев соответствуют центру тяжести крупного аэропортового комплекса. Это приложение представляет собой интерактивный инструмент, специально разработанный для того, чтобы помочь пользователям точно определить и визуализировать местоположение в пределах более крупного комплекса, например, конкретные терминалы или точки посадки/высадки в аэропорту.

Вот как это достигается:

Поиск аэропорта/места проведения : пользователи начинают с поиска основного местоположения (например, «Международный аэропорт имени Индиры Ганди») с помощью функции автозаполнения Google Places, которая ограничена Индией.

Обнаружение дополнительных местоположений : после выбора основного местоположения скрипт использует API Google Places для извлечения сведений, включая, что особенно важно, любые перечисленные «дополнительные пункты назначения», связанные с этим местом (например, Терминал 1, Терминал 3, определенные выходы и т. д., если они доступны в данных Google).

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

Затем он отображает основное местоположение и размещает на карте отдельные интерактивные маркеры (синие круги) для каждого определенного дополнительного пункта назначения.

Точная идентификация : при нажатии на маркер дополнительного пункта назначения он подсвечивается (становится зелёным) и открывается информационное окно с его названием и другими доступными данными (например, адресом или типом), позволяющее пользователю подтвердить выбор нужной точки. Контекстный вид : карта автоматически корректирует свой вид ( fitBounds ), чтобы убедиться, что все соответствующие маркеры (основное местоположение + дополнительные пункты назначения) хорошо видны.

API платформы Google Карт в приложении навигации по аэропорту

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

1. Инициализация и отображение карты

Основой приложения является сама интерактивная карта.

• Используемый API: google.maps.Map (из Maps JavaScript API)
• Цель: Создание и отображение интерактивной карты на веб-странице.
• Ключевые параметры:
  • center : определяет начальный географический центр карты. В этом приложении изначально заданы координаты Дели ( { lat: 28.461835685621395, lng: 77.05004035761647 } ).
  • zoom : устанавливает начальный уровень масштабирования карты. DEFAULT_ZOOM_LEVEL (15) используется для просмотра крупным планом.
  • mapId : уникальный идентификатор стиля карты, настроенный в Google Cloud Console.

2. Поиск и автозаполнение мест

Функциональность панели поиска реализована на основе API Places.

• Используемый API: google.maps.places.Autocomplete (из библиотеки Places JavaScript API Карт)
• Назначение: обеспечивает предиктивное завершение текста для географических поисков по мере ввода текста пользователем, предлагая соответствующие места, например аэропорты.
• Ключевые параметры:
  • input : HTML-элемент ввода ( #search-input ), где пользователь вводит свой запрос.
  • componentRestrictions : Фильтрует результаты поиска по конкретной стране. Здесь { country: 'in' } ограничивает результаты Индией.
  • fields : указывает поля данных, которые необходимо вернуть для выбранного места. ['place_id'] изначально используется для извлечения только уникального идентификатора места, что оптимизирует передачу данных.
• Как использовать автозаполнение

    // Initialize Autocomplete
    const autocomplete = new google.maps.places.Autocomplete(input, {
      componentRestrictions: { country: 'in' },
      fields: ['place_id'],
    });

    // Add listener to the Autocomplete
    autocomplete.addListener('place_changed', async () => {
      const place = autocomplete.getPlace();
      if (!place.place_id) {
        return;
      }
      // Once a place is selected, fetch details
      await getPlaceDetails(place.place_id);
    });

3. Получение подробной информации о месте и обработка дополнительных пунктов назначения

После выбора места из вариантов автозаполнения извлекаются более подробные сведения.

• Используемый API: API Places (через прямой вызов fetch https://places.googleapis.com/v1/places/{placeId} )
• Цель: получение подробных сведений о конкретном месте, включая его отображаемое имя, адрес, типы и, что особенно важно, его subDestinations (например, отдельные терминалы или важные зоны в пределах более крупного комплекса, например аэропорта).
• Ключевые параметры в URL:
  1. {placeId} : уникальный идентификатор выбранного места.
  2. fields : определяет точные поля данных для извлечения. Приложение запрашивает id , displayName , subDestinations , types и formattedAddress . Это критически важно для контроля затрат и получения только необходимых данных.
• Как получить subDestinations с учетом местоположения

async function getPlaceDetails(placeId) {
  // Construct the URL for the Places API (v1) details endpoint
  // The 'fields' parameter is crucial for requesting subDestinations
  const url = `https://places.googleapis.com/v1/places/${placeId}?key=YOUR_API_KEY&fields=id,displayName,subDestinations,types,formattedAddress`;

  const response = await fetch(url);
  const data = await response.json();

  // Accessing subDestinations from the Places API response
  if (data.subDestinations && data.subDestinations.length > 0) {
    for (const subDestination of data.subDestinations) {
      // Each subDestination object contains an 'id' and 'displayName'
      console.log(`Sub-destination ID: ${subDestination.id}`);
      console.log(`Sub-destination Name: ${subDestination.displayName?.text}`);
      // This subDestination.id is then used in a geocoding call (as shown in section 4)
    }
  }
}

**Handling `subDestinations`:** When the Places API returns
`subDestinations`, the application initiates a process for each one:
1.  **Geocoding:** It uses the `google.maps.Geocoder` to convert
    each `subDestination.id` into its precise geographical coordinates
    (`lat`, `lng`).
1.  **Marker Placement:** A distinct marker is added to the map for
    each sub-destination. These markers are styled with a blue circle icon
    to differentiate them.
1.  **Map Bounds Adjustment:** The `google.maps.LatLngBounds` object
    is used to dynamically expand the map's view to encompass all retrieved
    sub-destinations, verifying they are all visible within the current map
    frame.
1.  **Interactive Information Window:** A `click` listener is
    attached to each sub-destination marker. When clicked, the marker's
    icon changes to green, and an `InfoWindow` appears, displaying the
    sub-destination's name, address, and types. This provides immediate,
    detailed context to the user.

4. Геокодирование и обратное геокодирование: получение информации о дополнительных пунктах назначения

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

• Используемый API: google.maps.Geocoder (из API JavaScript Карт) и API геокодирования (через прямой вызов fetch https://maps.googleapis.com/maps/api/geocode/json )
• Цель:
  • google.maps.Geocoder : используется для преобразования placeId (полученного из Autocomplete или Places API) в географические координаты ( lat , lng ) и область просмотра, что позволяет правильно центрировать и масштабировать карту относительно выбранного места и его подпунктов назначения.
  • API геокодирования ( fetch ): используется для обратного геокодирования (преобразования широты и долготы в понятный человеку адрес), а также для извлечения расширенных данных о местоположении, таких как контуры зданий и навигационные точки.
• Ключевые параметры:
  • google.maps.Geocoder.geocode() :
    • placeId : Идентификатор места для геокодирования.
    • location : Объект LatLng для обратного геокодирования.
  • Вызов API геокодирования fetch :
    • latlng : Координаты широты и долготы для обратного геокодирования.
    • extra_computations=BUILDING_AND_ENTRANCES : Этот критический параметр запрашивает дополнительные данные, в частности информацию о контурах зданий и входах, которая затем используется для отображения контуров зданий и навигационных точек.

Как использовать идентификатор subDestination для получения дополнительных сведений (например, местоположения, форматированного адреса, типов)

function geocodeAndAddMarker(subDestination, bounds) {
  return new Promise((resolve, reject) => {
    const geocoder = new google.maps.Geocoder();
    // Using the subDestination.id to geocode and get location details
    geocoder.geocode({ placeId: subDestination.id }, (results, status) => {
      if (status === "OK" && results[0]) {
        const location = results[0].geometry.location;
        const displayName = subDestination.displayName?.text || "Sub-destination";
        const formattedAddress = results[0].formatted_address; // Further detail from Geocoding
        const types = results[0].types; // Further detail from Geocoding

        const marker = new google.maps.Marker({
          map: map,
          position: location,
          title: displayName,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'blue',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          }
        });

        marker.addListener('click', () => {
          marker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'green',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          });
          const infowindow = new google.maps.InfoWindow({
            content: `<b>${displayName}</b><br><p>Address: ${formattedAddress}</p><p>Types: ${types.join(', ')}</p>`,
          });
          infowindow.open(map, marker);
        });
        bounds.extend(location);
        resolve(true);
      } else {
        reject(new Error(`Geocoding failed for placeId: ${subDestination.id}`));
      }
    });
  });
}

5. Отображение маркеров

Маркеры используются для выделения определенных мест на карте.

• Используемый API: google.maps.Marker (из Maps JavaScript API) и google.maps.marker.AdvancedMarkerElement с google.maps.marker.PinElement (из библиотеки маркеров Maps JavaScript API)
• Цель:
  • google.maps.Marker : используется для начального перетаскиваемого маркера (хотя в предоставленном коде draggable задано значение false , это часть его возможностей) и для основных маркеров дополнительных пунктов назначения, как описано в разделе 3.
  • AdvancedMarkerElement и PinElement : используются для более визуально различимых маркеров точек навигации, позволяя настраивать стили булавки маркера.
• Ключевые параметры:
  • position : Координаты LatLng , где будет размещен маркер.
  • map : Экземпляр карты, на котором будет отображаться маркер.
  • title : Текст, отображаемый при наведении курсора на маркер.
  • icon : позволяет использовать пользовательские значки для google.maps.Marker (например, google.maps.SymbolPath.CIRCLE с пользовательскими цветами).
  • content : Для AdvancedMarkerElement это позволяет встраивать пользовательский HTML-контент, включая PinElement для предварительно стилизованных пинов.
  • Параметры PinElement : background , borderColor , glyphColor , scale для визуальной настройки.

6. Отображение контуров зданий

Приложение может визуально отображать контуры зданий.

• Используемый API: google.maps.Data (из Maps JavaScript API)
• Назначение: отображение географических данных, таких как контуры зданий (возвращаются как GeoJSON display_polygon из extra_computations API геокодирования).
• Ключевые параметры:
  • map : экземпляр карты, к которому применяется слой данных.
  • style : определяет внешний вид объектов GeoJSON (например, strokeColor , fillColor , fillOpacity ).
  • addGeoJson() : метод добавления данных GeoJSON в слой.

7. Границы карты и масштабирование

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

• Используемый API: google.maps.LatLngBounds (из Maps JavaScript API)
• Цель: динамически настраивать область просмотра карты для размещения набора географических точек (например, основного места и всех его дополнительных пунктов назначения).
• Ключевые методы:
  • extend(location) : добавляет точку LatLng к границам, расширяя их при необходимости.
  • fitBounds(bounds) : корректирует центр карты и уровень масштабирования для отображения всей области, определенной объектом LatLngBounds .

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

Вопросы реализации Обратите внимание, что эта функция работает не во всех зонах аэропорта и зависит от доступности данных (терминала аэропорта).

API геокодирования ресурсов API мест API карт API Javascript

Авторы: