Diese Seite wurde von der Cloud Translation API übersetzt.

Verbesserte Navigation zu Flughäfen

Flughäfen sind große Komplexe mit mehreren Terminals. Eine präzise Navigation ist entscheidend für pünktliche Ankünfte und Abflüge. Die Google Maps Geocoding API gibt in der Regel eine Koordinate (Breiten-/Längengrad) zurück, die in den meisten Fällen dem Schwerpunkt des großen Flughafenkomplexes entspricht. Diese App ist ein interaktives Tool, mit dem Nutzer genaue Standorte in einem großen Komplex wie einem Flughafen finden und visualisieren können, z. B. bestimmte Terminals oder Abhol- und Bringorte.

So funktioniert das:

Suche nach Flughafen/Veranstaltungsort: Nutzer suchen zuerst nach einem Hauptstandort (z.B. „Indira Gandhi International Airport“), die auf Indien beschränkt ist.

Ermittlung von untergeordneten Standorten: Nachdem ein primärer Standort ausgewählt wurde, ruft das Script mit der Google Places API Details ab, insbesondere alle untergeordneten Ziele, die mit diesem Ort verknüpft sind (z. B. Terminal 1, Terminal 3, bestimmte Gates usw., sofern in den Daten von Google verfügbar).

Visuelle Kartierung: Das Script verwendet die Geocoding API, um die Koordinaten des Hauptstandorts und der untergeordneten Ziele zu ermitteln.

Anschließend wird der Hauptstandort angezeigt und für jedes ermittelte Unterziel werden separate, anklickbare Markierungen (blaue Kreise) auf der Karte platziert.

Genaue Identifizierung: Wenn Sie auf eine Markierung für ein untergeordnetes Ziel klicken, wird sie hervorgehoben (grün) und ein Infofenster mit dem Namen und anderen verfügbaren Details (z. B. Adresse oder Typ) wird geöffnet. So kann der Nutzer bestätigen, dass er den richtigen Punkt ausgewählt hat. Kontextansicht: Die Karte passt ihre Ansicht (fitBounds) automatisch an, damit alle relevanten Markierungen (Hauptstandort + untergeordnete Ziele) deutlich sichtbar sind.

Google Maps Platform APIs in der Airport Navigation App

In diesem Dokument werden die wichtigsten Google Maps Platform APIs und ihre Parameter erläutert, die in der bereitgestellten Demoanwendung „Navigate to Airport“ (Zum Flughafen navigieren) verwendet werden. Die App nutzt mehrere Dienste, um Karten, die Suche nach Orten, detaillierte Ortsinformationen und erweiterte Standortinformationen bereitzustellen.

1. Karte initialisieren und anzeigen

Die Grundlage der Anwendung ist die interaktive Karte selbst.

Verwendete API:google.maps.Map (aus der Maps JavaScript API)
Zweck:Erstellen und Anzeigen der interaktiven Karte auf der Webseite.
Wichtige Parameter:
- center: Definiert den geografischen Mittelpunkt der Karte. In dieser App ist sie anfangs auf die Koordinaten von Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }) festgelegt.
- zoom: Legt die anfängliche Zoomstufe der Karte fest. DEFAULT_ZOOM_LEVEL (15) wird für eine Nahaufnahme verwendet.
- mapId: Eine eindeutige Kennung für einen Kartenstil, der in der Google Cloud Console konfiguriert wurde.

2. Place Search und Autocomplete

Die Suchleistenfunktion wird von der Places API unterstützt.

Verwendete API:google.maps.places.Autocomplete (aus der Places Library der Maps JavaScript API)
Zweck:Bietet eine Funktion zum automatischen Vervollständigen von Text für geografische Suchanfragen, während der Nutzer tippt, und schlägt relevante Orte wie Flughäfen vor.
Wichtige Parameter:
- input: Das HTML-Eingabeelement (#search-input), in das der Nutzer seine Anfrage eingibt.
- componentRestrictions: Filtert die Suchergebnisse nach einem bestimmten Land. Hier werden die Ergebnisse durch { country: 'in' } auf Indien beschränkt.
- fields: Gibt die Datenfelder an, die für den ausgewählten Ort zurückgegeben werden sollen. ['place_id'] wird anfangs verwendet, um nur die eindeutige Kennung für den Ort abzurufen und so die Datenübertragung zu optimieren.
Automatische Vervollständigung verwenden

    // 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. Detaillierte Ortsinformationen abrufen und untergeordnete Ziele verarbeiten

Sobald ein Ort aus den Vorschlägen zur automatischen Vervollständigung ausgewählt wurde, werden umfassendere Details abgerufen.

Verwendete API:Places API (über direkten fetch-Aufruf von https://places.googleapis.com/v1/places/{placeId})
Zweck:Abrufen umfassender Informationen zu einem bestimmten Ort, einschließlich Anzeigename, Adresse, Typen und vor allem subDestinations (z.B. einzelne Terminals oder wichtige Bereiche innerhalb eines größeren Komplexes wie eines Flughafens).
Schlüsselparameter in der URL:
1. {placeId}: Die eindeutige Kennung des ausgewählten Orts.
2. fields: Gibt die genauen Datenfelder an, die abgerufen werden sollen. Die App fordert id, displayName, subDestinations, types und formattedAddress an. Das ist entscheidend, um Kosten zu kontrollieren und nur die erforderlichen Daten zu erhalten.
subDestinations für einen bestimmten Standort abrufen

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. Geocoding und umgekehrtes Geocoding: Details für untergeordnete Ziele abrufen

Die Anwendung verwendet Geocoding für zwei Hauptzwecke: zum Umwandeln von Orts-IDs in Koordinaten und zum Umwandeln von Koordinaten in Ortsdetails. In diesem Abschnitt wird speziell erläutert, wie mit Geocoding detaillierte Informationen zu untergeordneten Zielen abgerufen werden.

Verwendete APIs:google.maps.Geocoder (aus der Maps JavaScript API) und Geocoding API (über direkten fetch-Aufruf an https://maps.googleapis.com/maps/api/geocode/json)
Zweck:
- google.maps.Geocoder: Wird verwendet, um einen placeId (aus Autocomplete oder Places API) in geografische Koordinaten (lat, lng) und einen Viewport zu konvertieren, damit die Karte richtig auf den ausgewählten Ort und seine untergeordneten Ziele zentriert und gezoomt werden kann.
- Geocoding API (fetch): Wird für die umgekehrte Geocodierung (Umwandlung von Breiten- und Längengrad in eine lesbare Adresse) und zum Abrufen erweiterter Standortdaten wie Gebäudeumrisse und Navigationspunkte verwendet.
Wichtige Parameter:
- google.maps.Geocoder.geocode():
  - placeId: Die Orts-ID, die geocodiert werden soll.
  - location: Das LatLng-Objekt für das Reverse Geocoding.
- Geocoding API fetch-Aufruf:
  - latlng: Die Koordinaten für Breiten- und Längengrad für die umgekehrte Geocodierung.
  - extra_computations=BUILDING_AND_ENTRANCES: Mit diesem wichtigen Parameter werden zusätzliche Daten angefordert, insbesondere Grundrisse und Informationen zu Eingängen, die dann zum Anzeigen von Gebäudeumrissen und Navigationspunkten verwendet werden.

So rufen Sie mit der subDestination-ID weitere Details ab (z.B. Standort, formatierte Adresse, Typen)

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. Markierungen anzeigen

Mit Markierungen werden bestimmte Orte auf der Karte hervorgehoben.

Verwendete APIs:google.maps.Marker (aus der Maps JavaScript API) und google.maps.marker.AdvancedMarkerElement mit google.maps.marker.PinElement (aus der Marker Library der Maps JavaScript API)
Zweck:
- google.maps.Marker: Wird für die erste ziehbare Markierung verwendet (obwohl draggable im bereitgestellten Code auf false festgelegt ist, ist sie Teil der Funktion) und für einfache Markierungen für untergeordnete Ziele, wie in Abschnitt 3 beschrieben.
- AdvancedMarkerElement und PinElement: Diese werden für die visuell deutlicheren Markierungen für Navigationspunkte verwendet und ermöglichen ein benutzerdefiniertes Styling der Markierung.
Wichtige Parameter:
- position: Die LatLng-Koordinaten, an denen die Markierung platziert wird.
- map: Die Karteninstanz, auf der die Markierung angezeigt wird.
- title: Text, der angezeigt wird, wenn der Mauszeiger auf die Markierung bewegt wird.
- icon: Ermöglicht benutzerdefinierte Symbole für google.maps.Marker (z.B. google.maps.SymbolPath.CIRCLE mit benutzerdefinierten Farben).
- content: Bei AdvancedMarkerElement können Sie damit benutzerdefinierte HTML-Inhalte einbetten, einschließlich PinElement für vorformatierte Pins.
- PinElement-Parameter: background, borderColor, glyphColor, scale für die visuelle Anpassung.

6. Gebäudeumrisse anzeigen

Die Anwendung kann die Grundrisse von Gebäuden visuell darstellen.

Verwendete API:google.maps.Data (aus der Maps JavaScript API)
Zweck:Geografische Daten wie Gebäudeumrisse anzeigen (als GeoJSON display_polygon von der extra_computations der Geocoding API zurückgegeben).
Wichtige Parameter:
- map: Die Karteninstanz, auf die die Datenschicht angewendet wird.
- style: Definiert die Darstellung der GeoJSON-Features (z.B. strokeColor, fillColor, fillOpacity).
- addGeoJson(): Methode zum Hinzufügen von GeoJSON-Daten zur Ebene.

7. Kartengrenzen und Zoom

Prüfen Sie, ob die Kartenansicht alle relevanten Orte umfasst.

Verwendete API:google.maps.LatLngBounds (aus der Maps JavaScript API)
Zweck:Der Darstellungsbereich der Karte wird dynamisch angepasst, um eine Sammlung geografischer Punkte (z.B. den Hauptort und alle zugehörigen Unterziele) darzustellen.
Wichtige Methoden:
- extend(location): Fügt den Grenzen einen LatLng-Punkt hinzu und erweitert sie bei Bedarf.
- fitBounds(bounds): Passt den Mittelpunkt und die Zoomstufe der Karte an, um den gesamten Bereich darzustellen, der durch das LatLngBounds-Objekt definiert wird.

Durch die Kombination dieser Google Maps Platform APIs bietet die Anwendung eine umfassende und interaktive Möglichkeit, nach Orten zu suchen, ihre Details aufzurufen und zugehörige geografische Informationen wie untergeordnete Ziele und Gebäudeumrisse zu visualisieren.

Hinweise zur Implementierung Diese Funktion ist nicht in allen Bereichen von Flughäfen verfügbar und hängt von der Verfügbarkeit von Daten (zum Flughafen-Terminal) ab.

Ressourcen Geocoding API Places API Maps JavaScript API

Autoren:

Verbesserte Navigation zu Flughäfen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.