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 tej tabeli opisano niektóre główne różnice w używaniu zdjęć miejsc między klasą Place a klasą 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.
Obiekt 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 służący do pobierania 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)

Ten fragment kodu pokazuje zwracanie zdjęć za pomocą funkcji PlacesService oraz wyświetlanie na stronie pierwszego wyniku wyszukiwania zdjęć. 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 element 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 docelowe zajęć (nowość)

Poniższy fragment kodu pokazuje użycie metody fetchFields() do zwracania szczegółów miejsca, w tym nazwy wyświetlanej i zdjęć miejsca. Najpierw tworzony jest nowy obiekt Place za pomocą identyfikatora miejsca, a potem wywoływane jest fetchFields(), w którym 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});
}

atrybucje autorów w klasie Place,

Klasa Place zwraca informacje o autorze jako instancję AuthorAttribution, która zawiera imię i nazwisko autora, URI strony profilu Google oraz URI zdjęcia profilowego autora. Ten fragment kodu pokazuje pobieranie danych atrybucji dotyczących pierwszego wyniku wyszukiwania zdjęć.

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