Ulepszona nawigacja do lotnisk

Lotniska to duże kompleksy z wieloma terminalami, dlatego precyzyjna nawigacja jest kluczowa dla punktualnych przylotów i odlotów. Interfejs Google Maps Geocoding API 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 po to, aby pomagać użytkownikom w określaniu i wizualizowaniu dokładnych lokalizacji w obrębie większego obiektu, np. konkretnych terminali lub punktów odbioru i wysiadania na lotnisku.

Oto jak to działa:

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

Wykrywanie podrzędnych lokalizacji: po wybraniu głównej lokalizacji skrypt używa interfejsu Google Places API do pobierania szczegółów, w tym wszystkich wymienionych „podrzędnych miejsc docelowych” powiązanych z tym miejscem (takich jak Terminal 1, Terminal 3, konkretne bramki itp., jeśli są dostępne w danych Google).

Mapowanie wizualne: skrypt używa interfejsu Geocoding API, aby znaleźć współrzędne głównej lokalizacji i jej podrzędnych miejsc docelowych.

Następnie wyświetla główną lokalizację i umieszcza na mapie odrębne, klikalne znaczniki (niebieskie kółka) dla każdego zidentyfikowanego podrzędnego miejsca docelowego.

Precyzyjna identyfikacja: kliknięcie znacznika podrzędnego miejsca docelowego powoduje jego wyróżnienie (zmienia kolor na zielony) i otwarcie okna informacyjnego z jego nazwą i 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 widok (fitBounds), aby wszystkie odpowiednie znaczniki (główna lokalizacja i miejsca docelowe) były dobrze widoczne.

Interfejsy API Google Maps Platform w aplikacji do nawigacji po lotnisku

W tym dokumencie znajdziesz opis najważniejszych interfejsów API Google Maps Platform i ich parametrów używanych w udostępnionej aplikacji demonstracyjnej „Navigate to Airport” (Nawigacja do lotniska). Aplikacja korzysta z kilku usług, aby wyświetlać mapy, wyszukiwać miejsca, podawać szczegółowe informacje o miejscach i zaawansowane statystyki lokalizacji.

1. Inicjowanie i wyświetlanie mapy

Podstawą aplikacji jest interaktywna mapa.

• Użyty interfejs API: google.maps.Map (z Maps JavaScript API)
• Cel: tworzenie i wyświetlanie interaktywnej mapy na stronie internetowej.
• Kluczowe parametry:
  • center: określa początkowe centrum geograficzne mapy. W tej aplikacji jest ona początkowo ustawiona na współrzędne Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
  • zoom: określa początkowy poziom powiększenia mapy. DEFAULT_ZOOM_LEVEL (15) służy do wyświetlania widoku w zbliżeniu.
  • mapId: unikalny identyfikator stylu mapy skonfigurowanego w konsoli Google Cloud.

2. Wyszukiwanie miejsc i autouzupełnianie

Funkcja paska wyszukiwania jest obsługiwana przez interfejs Places API.

• Użyty interfejs API: google.maps.places.Autocomplete (z biblioteki Miejsc w Maps JavaScript API)
• Cel: zapewnia autouzupełnianie tekstu w przypadku wyszukiwań geograficznych podczas wpisywania przez użytkownika tekstu, sugerując odpowiednie miejsca, takie jak lotniska.
• Kluczowe parametry:
  • input: element wejściowy HTML (#search-input), w którym użytkownik wpisuje zapytanie.
  • componentRestrictions: Filtruje wyniki wyszukiwania według konkretnego kraju. W tym przypadku { country: 'in' } ogranicza wyniki do Indii.
  • fields: określa pola danych, które mają zostać zwrócone dla wybranego miejsca. ['place_id'] jest początkowo używany do pobierania tylko unikalnego identyfikatora miejsca, co optymalizuje przesyłanie danych.
• Jak korzystać z 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 miejscu i obsługa miejsc docelowych

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

• Użyty 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 większym kompleksie, takim jak lotnisko).
• Kluczowe parametry w adresie URL:
  1. {placeId}: unikalny identyfikator wybranego miejsca.
  2. fields: określa dokładne pola danych do pobrania. Aplikacja prosi o dostęp do id, displayName, subDestinations, types i formattedAddress. Jest to kluczowe dla kontrolowania kosztów i otrzymywania tylko niezbędnych danych.
• Jak uzyskać subDestinations na podstawie 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 dotyczących podrzędnych miejsc docelowych

Aplikacja używa geokodowania w 2 głównych celach: do przekształcania identyfikatorów miejsc w współrzędne i odwrotnie. W tej sekcji opisujemy, jak geokodowanie jest używane do uzyskiwania szczegółowych informacji o podrzędnych miejscach docelowych.

• Użyte interfejsy API: google.maps.Geocoder (z Maps JavaScript API) i Geocoding API (przez bezpośrednie wywołanie fetch do https://maps.googleapis.com/maps/api/geocode/json)
• Cel:
  • google.maps.Geocoder: służy do przekształcania placeId (uzyskanego z Autouzupełniania lub interfejsu Places API) na współrzędne geograficzne (lat, lng) i obszar widoczny, co umożliwia prawidłowe wyśrodkowanie i powiększenie mapy w wybranym miejscu i jego podrzędnych miejscach docelowych.
  • Geocoding API (fetch): służy do odwrotnego geokodowania (przekształcania szerokości i długości geograficznej na adres zrozumiały dla człowieka) oraz do pobierania zaawansowanych danych o lokalizacji, takich jak kontury budynków i punkty nawigacyjne.
• Kluczowe parametry:
  • google.maps.Geocoder.geocode():
    • placeId: identyfikator miejsca do zakodowania geograficznego.
    • location: obiekt LatLng do odwrotnego geokodowania.
  • Wywołanie interfejsu Geocoding APIfetch:
    • latlng: współrzędne geograficzne szerokości i długości na potrzeby odwrotnego geokodowania.
    • extra_computations=BUILDING_AND_ENTRANCES: ten kluczowy parametr żąda dodatkowych danych, w szczególności informacji o obrysach budynków i wejściach, które są następnie wykorzystywane do wyświetlania konturów budynków i punktów nawigacyjnych.

Jak używać identyfikatora subDestination do pobierania dodatkowych informacji (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 określonych lokalizacji na mapie.

• Użyte interfejsy 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 w przypadku początkowego markera, który można przeciągać (chociaż w podanym kodzie wartość draggable jest ustawiona na false, jest to część jego możliwości) oraz w przypadku podstawowych markerów podrzędnych miejsc docelowych zgodnie z opisem w sekcji 3.
  • AdvancedMarkerElement i PinElement: używane w przypadku bardziej widocznych znaczników punktów nawigacyjnych, które umożliwiają niestandardowe stylowanie pinezki znacznika.
• Kluczowe parametry:
  • position: LatLng współrzędne, 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 z kolorami niestandardowymi).
  • content: w przypadku elementu AdvancedMarkerElement umożliwia osadzanie niestandardowej treści HTML, w tym elementu PinElement w przypadku wstępnie ostylowanych pinezek.
  • Parametry PinElement: background, borderColor, glyphColor, scale do dostosowywania wizualnego.

6. Wyświetlanie obrysów budynków

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

• Użyty interfejs API: google.maps.Data (z Maps JavaScript API)
• Cel: wyświetlanie danych geograficznych, takich jak kontury budynków (zwracanych jako GeoJSON display_polygon z interfejsu Geocoding APIextra_computations).
• Kluczowe parametry:
  • map: instancja mapy, do której zastosowano warstwę 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

sprawdź, czy widok mapy obejmuje wszystkie odpowiednie lokalizacje;

• Użyty interfejs API: google.maps.LatLngBounds (z Maps JavaScript API)
• Cel: dynamiczne dostosowywanie widocznego obszaru mapy do zbioru punktów geograficznych (np. głównego miejsca i wszystkich jego podlokalizacji).
• Najważniejsze metody:
  • extend(location): dodaje do granic LatLng punktów, w razie potrzeby je rozszerzając.
  • fitBounds(bounds): dostosowuje środek mapy i poziom powiększenia, 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 wizualizacji powiązanych informacji geograficznych, takich jak podrzędne miejsca docelowe i zarysy budynków.

Wskazówki dotyczące wdrażania Pamiętaj, że ta funkcja nie działa na wszystkich obszarach lotnisk i zależy od dostępności danych (terminalu lotniska).

Zasoby Geocoding API Places API Maps JavaScript API

Autorzy: