Zur neuen Funktion „Place Details“ migrieren

Entwickler im Europäischen Wirtschaftsraum (EWR)

Die Places API kann detaillierte Informationen zu einem bestimmten Ort zurückgeben. Auf dieser Seite werden die Unterschiede zwischen Ortsdetails in der Klasse Place (neu) und PlacesService (alt) erläutert. Außerdem finden Sie einige Code-Snippets zum Vergleich. In der folgenden Tabelle sind einige der wichtigsten Unterschiede bei der Verwendung von Ortsdetails zwischen der Klasse Place und PlacesService aufgeführt:

PlacesService (Legacy) Place (Neu)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
Für Methoden ist die Verwendung eines Callbacks erforderlich, um das Ergebnisobjekt und die google.maps.places.PlacesServiceStatus-Antwort zu verarbeiten. Verwendet Promises und funktioniert asynchron.
Für Methoden ist eine PlacesServiceStatus-Prüfung erforderlich. Keine Statusprüfung erforderlich, es kann die Standardfehlerbehandlung verwendet werden. Weitere Informationen
Ortsdatenfelder werden im Snake-Case-Format formatiert. Ortsdatenfelder werden im CamelCase-Format formatiert.
Beschränkt auf eine feste Gruppe von Ortsarten und Ortsdatenfeldern. Bietet eine erweiterte Auswahl an regelmäßig aktualisierten Ortstypen und Ortsdatenfeldern.

Codevergleich

In diesem Abschnitt werden zwei ähnliche Codeabschnitte verglichen, um die Unterschiede zwischen dem Places-Dienst und der Place-Klasse zu veranschaulichen. Die Code-Snippets zeigen den Code, der für die jeweilige API erforderlich ist, um eine Anfrage für Ortsdetails zu stellen und die resultierenden Ortsdaten zu verwenden, um der Karte eine Markierung hinzuzufügen.

Places Service (Legacy)

Das folgende verkürzte Code-Snippet zeigt, wie eine Anfrage für Ortsdetails mit PlacesService gestellt wird. In der Anfrage wird ein Callback verwendet und sie enthält eine erforderliche bedingte Prüfung für PlacesServiceStatus. Die erforderlichen Datenfelder für Orte werden im Anfragetext angegeben.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

Weitere Informationen

Place-Klasse (Neu)

Das folgende verkürzte Code-Snippet zeigt, wie eine Anfrage für Ortsdetails mit der Klasse Place gestellt wird. Die Anfrage ist asynchron und enthält keine Statusprüfung (es kann eine Standardfehlerbehandlung verwendet werden). Eine Orts-ID wird verwendet, um eine neue Place-Instanz zu erstellen, die für die Anfrage (fetchFields()) verwendet wird. Die erforderlichen Ortsdatenfelder werden erst übergeben, wenn fetchFields() aufgerufen wird. Das bietet mehr Flexibilität. Da für die Methode fetchFields() der Operator „await“ verwendet wird, kann sie nur innerhalb einer async-Funktion verwendet werden.

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

Weitere Informationen