Ulepszona nawigacja do lotnisk

Lotniska to duże kompleksy z wieloma terminalami, dlatego precyzyjna nawigacja jest niezbędna, aby zapewnić punktualne przyloty i odloty. Geocoding API Map Google zwykle zwraca współrzędne (szerokość i długość geograficzną), które w większości przypadków są środkiem dużego kompleksu lotniskowego. Ta aplikacja to interaktywne narzędzie zaprojektowane specjalnie, aby pomagać użytkownikom w precyzyjnym lokalizowaniu i wizualizowaniu dokładnych miejsc w obrębie większego kompleksu, np. konkretnych terminali lub punktów odbioru i wysiadania na lotnisku.

Jak to działa:

Wyszukiwanie lotniska lub obiektu: użytkownicy zaczynają od wyszukania głównej lokalizacji (np. „Międzynarodowe lotnisko Indira Gandhi”) za pomocą pola autouzupełniania Miejsc Google , które jest ograniczone do Indii.

Odkrywanie podlokalizacji: po wybraniu lokalizacji głównej skrypt używa interfejsu Places API Google do pobierania szczegółów, w tym przede wszystkim wszystkich wymienionych „podlokalizacji” powiązanych z danym miejscem (np. terminal 1, terminal 3, konkretne bramki itp., jeśli są dostępne w danych Google).

Mapowanie wizualne: Skrypt używa Geocoding API do znajdowania współrzędnych lokalizacji głównej i jej podlokalizacji.

Następnie wyświetla lokalizację główną i umieszcza na mapie odrębne, klikalne znaczniki (niebieskie kółka) dla każdej zidentyfikowanej podlokalizacji.

Precyzyjna identyfikacja: kliknięcie znacznika podlokalizacji powoduje jego wyróżnienie (zmienia kolor na zielony) i otwarcie okna informacyjnego z nazwą oraz innymi dostępnymi szczegółami (np. adresem lub typem), co pozwala użytkownikowi potwierdzić, że wybrał właściwy punkt. Widok kontekstowy: mapa automatycznie dostosowuje swój widok (fitBounds), aby wszystkie odpowiednie znaczniki (lokalizacja główna + podlokalizacje) były dobrze widoczne.

Interfejsy API Google Maps Platform w aplikacji do nawigacji po lotnisku

Ten dokument zawiera opis najważniejszych interfejsów API Google Maps Platform i ich parametrów używanych w udostępnionej aplikacji demonstracyjnej „Nawigacja na lotnisko”. Aplikacja korzysta z kilku usług, aby wyświetlać mapę, wyszukiwać miejsca, podawać szczegółowe informacje o miejscach i zaawansowane statystyki lokalizacji.

1. Inicjowanie i wyświetlanie mapy

Podstawą aplikacji jest sama mapa interaktywna.

• Używany interfejs API: google.maps.Map (z Maps JavaScript API)
• Cel: utworzenie i wyświetlenie mapy interaktywnej na stronie.
• Najważniejsze parametry:
  • center: określa początkowy środek geograficzny mapy. W tej aplikacji jest on początkowo ustawiony na współrzędne Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
  • zoom: ustawia początkowy poziom powiększenia mapy. Do wyświetlania z bliska używany jest DEFAULT_ZOOM_LEVEL (15).
  • mapId: unikalny identyfikator stylu mapy skonfigurowany w konsoli Google Cloud.

2. Wyszukiwanie miejsc i autouzupełnianie

Funkcja paska wyszukiwania jest obsługiwana przez Places API.

• Używany interfejs API: google.maps.places.Autocomplete (z biblioteki Miejsc Maps JavaScript API)
• Cel: zapewnia predykcyjne uzupełnianie tekstu w przypadku wyszukiwań geograficznych podczas wpisywania przez użytkownika, sugerując odpowiednie miejsca, takie jak lotniska.
• Najważniejsze parametry:
  • input: element wejściowy HTML (#search-input), w którym użytkownik wpisuje zapytanie.
  • componentRestrictions: filtruje wyniki wyszukiwania do określonego kraju. W tym przypadku { country: 'in' } ogranicza wyniki do Indii.
  • fields: określa pola danych, które mają być zwracane dla wybranego miejsca. ['place_id'] jest używany początkowo, aby pobierać tylko unikalny identyfikator miejsca, co optymalizuje przesyłanie danych.
• Jak używać autouzupełniania

    // 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. Pobieranie szczegółowych informacji o miejscach i obsługa podlokalizacji

Po wybraniu miejsca z sugestii autouzupełniania pobierane są bardziej szczegółowe informacje.

• Używany interfejs API: Places API (za pomocą bezpośredniego wywołania fetch do https://places.googleapis.com/v1/places/{placeId})
• Cel: pobieranie szczegółowych informacji o konkretnym miejscu, w tym jego nazwy wyświetlanej, adresu, typów i, co najważniejsze, subDestinations (np. poszczególnych terminali lub ważnych obszarów w obrębie większego kompleksu, takiego jak lotnisko).
• Najważniejsze parametry w adresie URL:
  1. {placeId}: unikalny identyfikator wybranego miejsca.
  2. fields: określa dokładne pola danych, które mają zostać pobrane. Aplikacja wysyła zapytanie o id, displayName, subDestinations, types i formattedAddress. Jest to niezbędne do kontrolowania kosztów i otrzymywania tylko niezbędnych danych.
• Jak pobrać subDestinations dla danej lokalizacji

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. Geokodowanie i odwrotne geokodowanie: pobieranie szczegółów podlokalizacji

Aplikacja używa geokodowania do 2 głównych celów: konwertowania identyfikatorów miejsc na współrzędne i konwertowania współrzędnych z powrotem na szczegóły lokalizacji. W tej sekcji opisujemy, jak geokodowanie jest używane do uzyskiwania szczegółowych informacji o podlokalizacjach.

• Używany interfejs API: google.maps.Geocoder (z Maps JavaScript API) i Geocoding API (za pomocą bezpośredniego wywołania fetch do https://maps.googleapis.com/maps/api/geocode/json)
• Cel:
  • google.maps.Geocoder: służy do konwertowania placeId (uzyskanego z Autouzupełniania lub Places API) na współrzędne geograficzne (lat, lng) i widoczny obszar, co pozwala mapie prawidłowo wyśrodkować i powiększyć wybrane miejsce oraz jego podlokalizacje.
  • Geocoding API (fetch): służy do odwrotnego geokodowania (konwertowania szerokości i długości geograficznej na adres czytelny dla człowieka) oraz do pobierania zaawansowanych danych o lokalizacji, takich jak kontury budynków i punkty nawigacyjne.
• Najważniejsze parametry:
  • google.maps.Geocoder.geocode():
    • placeId: identyfikator miejsca do geokodowania.
    • location: obiekt LatLng do odwrotnego geokodowania.
  • Wywołanie fetch Geocoding API:
    • latlng: współrzędne szerokości i długości geograficznej do odwrotnego geokodowania.
    • extra_computations=BUILDING_AND_ENTRANCES: ten ważny parametr żąda dodatkowych danych, w tym konturów budynków i informacji o wejściach, które są następnie używane do wyświetlania konturów budynków i punktów nawigacyjnych.

Jak używać identyfikatora subDestination do pobierania dalszych szczegółów (np. lokalizacji, sformatowanego adresu, typów)

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. Wyświetlanie znaczników

Znaczniki służą do wyróżniania konkretnych lokalizacji na mapie.

• Używany interfejs API: google.maps.Marker (z Maps JavaScript API) i google.maps.marker.AdvancedMarkerElement z google.maps.marker.PinElement (z biblioteki znaczników Maps JavaScript API)
• Cel:
  • google.maps.Marker: używany do początkowego znacznika, który można przeciągać (chociaż w podanym kodzie draggable jest ustawiony na false, jest to część jego możliwości) oraz do podstawowych znaczników podlokalizacji opisanych w sekcji 3.
  • AdvancedMarkerElement i PinElement: używane do bardziej wizualnie odróżniających się znaczników punktów nawigacyjnych, co pozwala na niestandardowe stylowanie pinezki znacznika.
• Najważniejsze parametry:
  • position: współrzędne LatLng, w których zostanie umieszczony znacznik.
  • map: instancja mapy, na której będzie wyświetlany znacznik.
  • title: tekst wyświetlany po najechaniu kursorem na znacznik.
  • icon: umożliwia używanie niestandardowych ikon dla google.maps.Marker (np. google.maps.SymbolPath.CIRCLE ze spersonalizowanymi kolorami).
  • content: w przypadku AdvancedMarkerElement umożliwia osadzanie niestandardowej treści HTML, w tym PinElement dla wstępnie stylizowanych pinezek.
  • Parametry PinElement: background, borderColor, glyphColor, scale do dostosowywania wyglądu.

6. Wyświetlanie konturów budynków

Aplikacja może wizualnie przedstawiać kontury budynków.

• Używany interfejs API: google.maps.Data (z Maps JavaScript API)
• Cel: wyświetlanie danych geograficznych, takich jak kontury budynków (zwracane jako GeoJSON display_polygon z extra_computations Geocoding API).
• Najważniejsze parametry:
  • map: instancja mapy, do której jest stosowana warstwa danych.
  • style: określa wygląd elementów GeoJSON (np. strokeColor, fillColor, fillOpacity).
  • addGeoJson(): metoda dodawania danych GeoJSON do warstwy.

7. Granice mapy i powiększenie

sprawdzanie, czy widok mapy obejmuje wszystkie odpowiednie lokalizacje.

• Używany interfejs API: google.maps.LatLngBounds (z Maps JavaScript API)
• Cel: dynamiczne dostosowywanie widocznego obszaru mapy do kolekcji punktów geograficznych (np. miejsca głównego i wszystkich jego podlokalizacji).
• Najważniejsze metody:
  • extend(location): dodaje punkt LatLng do granic, w razie potrzeby je rozszerzając.
  • fitBounds(bounds): dostosowuje środek i poziom powiększenia mapy, aby wyświetlić cały obszar zdefiniowany przez obiekt LatLngBounds.

Dzięki połączeniu tych interfejsów API Google Maps Platform aplikacja zapewnia kompleksowe i interaktywne środowisko do wyszukiwania miejsc, wyświetlania ich szczegółów i wizualizowania powiązanych informacji geograficznych, takich jak podlokalizacje i kontury budynków.

Ważne informacje o implementacji ta funkcja nie działa we wszystkich obszarach lotnisk i zależy od dostępności danych (terminali lotniskowych).

Materiały Geocoding API Places API Maps Javascript API

Autorzy: