Przenoszenie zdjęć do nowej usługi Zdjęcia miejsc

Place Photos umożliwia dodawanie do stron internetowych wysokiej jakości treści fotograficznych. Na tej stronie wyjaśniamy różnice między funkcjami umieszczania zdjęć w klasie Place (nowej) i PlacesService (starszej) oraz udostępniamy fragmenty kodu do porównania.

  • PlacesService (starsza wersja) zwraca tablicę zawierającą maksymalnie 10 obiektów PlacePhoto jako część obiektu PlaceResult w dowolnym żądaniu getDetails(), jeśli w żądaniu zostało określone pole photos. W przypadku textSearch() i nearbySearch() domyślnie zwracane jest pierwsze zdjęcie miejsca, jeśli jest dostępne.
  • Klasa Place zwraca tablicę zawierającą do 10 obiektów Photo w ramach żądania fetchFields(), jeśli w żądaniu zostało określone pole photos.

W tabeli poniżej znajdziesz niektóre główne różnice w używaniu zdjęć miejsc między klasą Place a PlacesService:

PlacesService (starsza wersja) Place (nowy)
Interfejs PlacePhoto Photo zajęcia
Funkcja PlacePhoto zwraca ciąg znaków html_attributions. Funkcja Photo zwraca instancję AuthorAttribution.
Metody wymagają użycia wywołania zwrotnego do obsługi obiektu wyników i odpowiedzi google.maps.places.PlacesServiceStatus. Korzysta z obietnic i działa asynchronicznie.
Metody wymagają sprawdzenia PlacesServiceStatus. Nie wymaga sprawdzania stanu, może używać standardowej obsługi błędów.
PlacesService musi zostać utworzony za pomocą mapy lub elementu div. Place może być tworzony w dowolnym miejscu, bez odwołania do mapy lub elementu strony.

Porównanie kodu

W tej sekcji porównujemy kod zdjęć miejsc, aby zilustrować różnice między usługą Places a klasą Place. Fragmenty kodu zawierają kod wymagany do wysyłania żądań o zdjęcia miejsc do poszczególnych interfejsów API.

Usługa Miejsca (starsza wersja)

Poniższy fragment kodu powoduje zwracanie zdjęć za pomocą funkcji PlacesService i wyświetlanie na stronie pierwszego wyniku wyszukiwania zdjęcia. W tym przykładzie żądanie szczegółów miejsca zawiera identyfikator miejsca oraz pola name i photos. Pierwsze zdjęcie jest wyświetlane na stronie po sprawdzeniu stanu usługi. Podczas tworzenia instancji PlacesService należy określić mapę lub element div. W tym przykładzie nie ma mapy, więc użyto elementu div.

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});
    }
  });
}

Atrybuty autorów w PlacesService

Funkcja PlacesService zwraca wymagane informacje o autorze jako ciąg znaków html_attributions zawierający adres URL wskazujący na stronę profilu Google autora. Poniższy fragment kodu pokazuje pobieranie danych atrybucji dotyczących pierwszego wyniku wyszukiwania zdjęcia.

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

Więcej informacji

Miejsce zajęć (nowe)

Poniższy fragment kodu pokazuje użycie metody fetchFields() do zwrócenia szczegółów miejsca, w tym wyświetlanej nazwy i zdjęć miejsca. Najpierw tworzony jest nowy obiekt Place za pomocą identyfikatora miejsca, a potem następuje wywołanie metody fetchFields(), w której podawane są pola displayName i photos. Na stronie wyświetla się zdjęcie pierwszego miejsca. Korzystając z klasy Place, nie musisz sprawdzać stanu usługi, ponieważ jest on obsługiwany automatycznie.

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});
}

atrybuty autorów w klasie Place,

Klasa Place zwraca informacje o autorze jako instancję AuthorAttribution, która zawiera nazwę autora, identyfikator URI strony profilu Google oraz identyfikator URI zdjęcia profilowego. Ten fragment kodu pokazuje pobieranie danych atrybucji dla pierwszego wyniku zdjęcia.

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

Więcej informacji