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

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Zdjęcia miejsc pozwalają dodawać do stron internetowych treści fotograficzne wysokiej jakości. Ta strona wyjaśnia różnice między funkcjami zdjęć miejsc w klasie Place (nowa wersja) i PlacesService (starsza wersja) oraz zawiera fragmenty kodu do porównania.

  • PlacesService (starsza wersja) zwraca tablicę zawierającą maksymalnie 10 PlacePhoto obiektów w ramach obiektu PlaceResult w przypadku każdego żądania getDetails(), jeśli w żądaniu określono 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ą maksymalnie 10 Photo obiektów w ramach żądania fetchFields(), jeśli w żądaniu określono pole photos.

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

PlacesService (starsza wersja) Place (nowa wersja)
PlacePhoto interfejs Photo zajęcia
PlacePhoto zwraca html_attributions jako ciąg tekstowy. Photo zwraca instancję AuthorAttribution.
Metody wymagają użycia wywołania zwrotnego do obsługi obiektu wyników i google.maps.places.PlacesServiceStatus odpowiedzi. Używa obietnic i działa asynchronicznie.
Metody wymagają sprawdzenia PlacesServiceStatus. Nie jest wymagane sprawdzanie stanu, można użyć standardowej obsługi błędów. Więcej informacji.
PlacesService musi zostać utworzona za pomocą mapy lub elementu div. Place można utworzyć w dowolnym miejscu, bez odniesienia do mapy lub elementu strony.

Porównanie kodu

W tej sekcji porównujemy kod zdjęć miejsc, aby zilustrować różnice między usługą Miejsca a klasą Place. Fragmenty kodu pokazują kod wymagany do żądania zdjęć miejsc w każdym interfejsie API.

Usługa Miejsca (starsza wersja)

Poniższy fragment kodu pokazuje zwracanie zdjęć za pomocą PlacesService i wyświetlanie pierwszego wyniku zdjęcia na stronie. W tym przykładzie żądanie szczegółów miejsca określa identyfikator miejsca oraz pola name i photos. Po sprawdzeniu stanu usługi pierwsze zdjęcie jest wyświetlane na stronie. Podczas tworzenia instancji PlacesService należy określić mapę lub element div. Ponieważ ten przykład nie zawiera mapy, używany jest 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});
    }
  });
}

Atrybucje autora w PlacesService

PlacesService zwraca wymagane atrybucje autora jako html_attributions ciąg zawierający adres URL prowadzący do strony profilu autora w Google. Poniższy fragment kodu pokazuje pobieranie danych atrybucji dla pierwszego wyniku zdjęcia.

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

Więcej informacji

Klasa Place (nowa)

Poniższy fragment kodu pokazuje użycie metody fetchFields() do zwracania szczegółów miejsca, w tym nazwy wyświetlanej i zdjęć miejsca. Najpierw tworzona jest nowa instancja obiektu Place za pomocą identyfikatora miejsca, a następnie wywoływana jest metoda fetchFields(), w której określono pola displayName i photos. Pierwsze zdjęcie miejsca jest następnie wyświetlane na stronie. Podczas korzystania z klasy Place nie trzeba sprawdzać stanu usługi, ponieważ jest to obsługiwane 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 autora w klasie Place

Klasa Place zwraca atrybucje autora jako instancję AuthorAttribution zawierającą imię i nazwisko autora, identyfikator URI strony profilu autora w Google oraz identyfikator URI zdjęcia profilowego autora. Poniższy 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