Zur neuen Place Photos-Version migrieren

Entwickler im Europäischen Wirtschaftsraum (EWR)

Mit der Funktion „Place Photos“ können Sie qualitativ hochwertige Fotos auf Ihren Webseiten einbinden. Auf dieser Seite werden die Unterschiede zwischen den Funktionen für Ortsfotos in der Klasse Place (neu) und PlacesService (alt) erläutert. Außerdem finden Sie einige Code-Snippets zum Vergleich.

  • PlacesService (Legacy) gibt ein Array mit bis zu 10 PlacePhoto-Objekten als Teil des PlaceResult-Objekts für jede getDetails()-Anfrage zurück, wenn das Feld photos in der Anfrage angegeben ist. Bei textSearch() und nearbySearch() wird standardmäßig das Foto des ersten Platzes zurückgegeben, sofern es verfügbar ist.
  • Die Klasse Place gibt im Rahmen einer fetchFields()-Anfrage ein Array mit bis zu 10 Photo-Objekten zurück, wenn das Feld photos in der Anfrage angegeben ist.

In der folgenden Tabelle sind einige der wichtigsten Unterschiede bei der Verwendung von Ortsfotos zwischen der Klasse Place und PlacesService aufgeführt:

PlacesService (Legacy) Place (Neu)
PlacePhoto-Schnittstelle Photo-Klasse
PlacePhoto gibt html_attributions als String zurück. Photo gibt eine AuthorAttribution-Instanz zurück.
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
PlacesService muss mit einer Karte oder einem div-Element instanziiert werden. Place kann bei Bedarf instanziiert werden, ohne dass ein Verweis auf eine Karte oder ein Seitenelement erforderlich ist.

Codevergleich

In diesem Abschnitt wird Code für Ortsfotos verglichen, um die Unterschiede zwischen dem Places Service und der Place-Klasse zu veranschaulichen. Die Code-Snippets zeigen den Code, der zum Anfordern von Ortsfotos in den jeweiligen APIs erforderlich ist.

Places Service (Legacy)

Im folgenden Snippet wird gezeigt, wie Fotos mit PlacesService zurückgegeben und das erste Fotoergebnis auf der Seite angezeigt wird. In diesem Beispiel wird in der „Place Details“-Anfrage eine Orts-ID zusammen mit den Feldern name und photos angegeben. Das erste Foto wird dann auf der Seite angezeigt, nachdem der Dienststatus geprüft wurde. Beim Instanziieren von PlacesService muss eine Karte oder ein div-Element angegeben werden. Da dieses Beispiel keine Karte enthält, wird ein div-Element verwendet.

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

Autorenangaben in PlacesService

Der PlacesService gibt die erforderlichen Quellenangaben als html_attributions-String zurück, der eine URL enthält, die auf die Google-Profilseite des Autors verweist. Im folgenden Snippet sehen Sie, wie Attributionsdaten für das erste Fotoergebnis abgerufen werden.

let attributionUrl = place.photos[0].html_attributions;

Weitere Informationen

Place-Klasse (neu)

Im folgenden Snippet wird gezeigt, wie mit der Methode fetchFields() Ortsdetails zurückgegeben werden, einschließlich des Anzeigenamens und der Ortsfotos. Zuerst wird ein neues Place-Objekt mit einer Orts-ID instanziiert. Danach wird fetchFields() aufgerufen, wobei die Felder displayName und photos angegeben werden. Das Foto des ersten Platzes wird dann auf der Seite angezeigt. Bei Verwendung der Klasse Place ist es nicht erforderlich, den Dienststatus zu prüfen, da dies automatisch erfolgt.

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

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

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Autorenangaben in der Klasse Place

Die Klasse Place gibt Quellenangaben für Autoren als AuthorAttribution-Instanz zurück, einschließlich des Namens des Autors, eines URI für die Google-Profilseite des Autors und eines URI für das Profilbild des Autors. Das folgende Snippet zeigt, wie Attributionsdaten für das erste Fotoergebnis abgerufen werden.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

Weitere Informationen