Zur neuen Version von Place Photos migrieren

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

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

In der folgenden Tabelle sind einige der Hauptunterschiede bei der Verwendung von Fotos von Orten zwischen der Place-Klasse und PlacesService aufgeführt:

PlacesService (alt) Place (neu)
PlacePhoto-Benutzeroberfläche Photo-Klasse
PlacePhoto gibt html_attributions als String zurück. Photo gibt eine AuthorAttribution-Instanz zurück.
Für Methoden ist ein Callback 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, Standardfehlerbehandlung kann verwendet werden.
PlacesService muss mit einem Karten- oder div-Element instanziiert werden. Place kann überall dort instanziiert werden, wo es benötigt wird, ohne Verweis auf ein Karten- oder Seitenelement.

Codevergleich

In diesem Abschnitt wird Code für Fotos von Orten verglichen, um die Unterschiede zwischen dem Places-Dienst und der Place-Klasse zu veranschaulichen. Die Code-Snippets zeigen den Code, der erforderlich ist, um Fotos von Orten über die jeweilige API anzufordern.

Places Service (alte Version)

Im folgenden Snippet werden Fotos mit PlacesService zurückgegeben und das erste Fotoergebnis auf der Seite angezeigt. In diesem Beispiel wird in der Anfrage für „Place Details“ eine Orts-ID sowie die Felder name und photos angegeben. Nach der Überprüfung des Dienststatus wird das erste Foto auf der Seite angezeigt. Beim Instanziieren von PlacesService muss eine Karte oder ein div-Element angegeben werden. Da in diesem Beispiel keine Karte verwendet wird, 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});
    }
  });
}

Autorzuordnungen in PlacesService

Der PlacesService gibt die erforderlichen Autorzuweisungen als html_attributions-String zurück, der eine URL zur Google-Profilseite des Autors enthält. Im folgenden Snippet wird das Abrufen von Attributionsdaten für das erste Fotoergebnis veranschaulicht.

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

Weitere Informationen

Place-Klasse (neu)

Im folgenden Snippet wird gezeigt, wie mit der Methode fetchFields() Details zu Orten zurückgegeben werden, einschließlich des Anzeigenamens und Fotos des Orts. Zuerst wird ein neues Place-Objekt mit einer Orts-ID instanziiert. Anschließend wird fetchFields() aufgerufen, wobei die Felder displayName und photos angegeben werden. Das Foto des Gewinners wird dann auf der Seite angezeigt. Bei Verwendung der Place-Klasse muss der Dienststatus nicht geprüft werden, da dies automatisch geschieht.

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 Place-Klasse gibt Autorzuordnungen als AuthorAttribution-Instanz zurück, die den Namen des Autors, einen URI für die Google-Profilseite des Autors und einen URI für das Profilbild des Autors enthält. Im folgenden Snippet wird das Abrufen von Attributionsdaten für das erste Fotoergebnis veranschaulicht.

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