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

изображение

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

изображение

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

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

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

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

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

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

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

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

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

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

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

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

Функциональность поисковой строки обеспечивается API Places.

  • Используемый API: google.maps.places.Autocomplete (из библиотеки Places API JavaScript для работы с картами)
  • Назначение: Обеспечивает автозаполнение текста для географических запросов по мере ввода пользователем данных, предлагая релевантные места, такие как аэропорты.
  • Ключевые параметры:
    • input : HTML-элемент input ( #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: Places API (через прямой вызов 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 (из JavaScript API карт) и Geocoding API (через прямой вызов fetch по адресу https://maps.googleapis.com/maps/api/geocode/json ).
  • Цель:
    • google.maps.Geocoder : Используется для преобразования placeId (полученного из автозаполнения или API мест) в географические координаты ( lat , lng ) и область просмотра, что позволяет правильно центрировать карту и масштабировать ее на выбранном месте и его подпунктах.
    • API геокодирования ( fetch ): используется для обратного геокодирования (преобразования широты и долготы в удобочитаемый адрес) и для получения расширенных данных о местоположении, таких как контуры зданий и точки навигации.
  • Ключевые параметры:
    • google.maps.Geocoder.geocode() :
      • placeId : Идентификатор места для геокодирования.
      • location : Объект LatLng для обратного геокодирования.
    • fetch API геокодирования:
      • 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 (из JavaScript API карт) и google.maps.marker.AdvancedMarkerElement с google.maps.marker.PinElement (из библиотеки маркеров 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 (из JavaScript API для работы с картами)
  • Назначение: Отображение географических данных, таких как контуры зданий (возвращаемые в формате GeoJSON display_polygon из функции extra_computations API геокодирования).
  • Ключевые параметры:
    • map : Экземпляр карты, к которому применяется слой данных.
    • style : Определяет внешний вид объектов GeoJSON (например, strokeColor , fillColor , fillOpacity ).
    • addGeoJson() : Метод для добавления данных GeoJSON в слой.

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

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

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

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

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

API геокодирования ресурсов , API мест, карты, API JavaScript.

Авторы: