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

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Usługa Zdjęcia miejsc umożliwia dodawanie do stron internetowych treści fotograficznych wysokiej jakości. Na tej stronie wyjaśniamy różnice między funkcjami zdjęć miejsc w klasach Place (nowa) i PlacesService (starsza) oraz podajemy fragmenty kodu do porównania.

  • PlacesService (starsza wersja) zwraca tablicę maksymalnie 10 obiektówPlacePhoto 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 obiektówPhoto w ramach żądania fetchFields(), jeśli w żądaniu określono pole photos.

W tabeli poniżej przedstawiono niektóre główne różnice w używaniu zdjęć miejsc między klasami Place i PlacesService:

PlacesService (starsza wersja) Place (Nowy)
PlacePhoto interfejs Photo zajęcia
PlacePhoto zwraca html_attributions jako ciąg znaków. Photo zwraca instancję AuthorAttribution.
Metody wymagają użycia wywołania zwrotnego do obsługi obiektu wyników i google.maps.places.PlacesServiceStatusodpowiedzi. Korzysta z obiektów Promise i działa asynchronicznie.
Metody wymagają sprawdzenia PlacesServiceStatus. Nie wymaga sprawdzania stanu, można użyć standardowej obsługi błędów. Więcej informacji
PlacesService musi być utworzony za pomocą mapy lub elementu div. Place można utworzyć w dowolnym miejscu bez odwoływania się 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 wysyłania żądań dotyczących zdjęć miejsc w poszczególnych interfejsach 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 pierwsza fotografia jest wyświetlana na stronie. Podczas tworzenia instancji elementu 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});
    }
  });
}

Atrybucje autorów w PlacesService

Funkcja PlacesService zwraca wymagane atrybucje autora w postaci html_attributions ciągu znaków zawierającego adres URL strony profilu autora w Google. Poniższy fragment kodu pokazuje pobieranie danych o atrybucji pierwszego wyniku zdjęcia.

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

Więcej informacji

Klasa miejsca (nowa)

Poniższy fragment kodu pokazuje użycie metody fetchFields() do zwracania szczegółów miejsca, w tym wyświetlanej nazwy i zdjęć miejsca. Najpierw tworzony jest nowy obiekt Place z użyciem identyfikatora miejsca, a następnie wywoływana jest funkcja fetchFields(), w której określone są pola displayName i photos. Zdjęcie z pierwszego miejsca jest następnie wyświetlane na stronie. Jeśli używasz klasy Place, nie musisz 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 autorów w przypadku Place

Klasa Place zwraca atrybucje autora jako instancję AuthorAttribution, która zawiera imię i nazwisko autora, URI strony profilu autora w Google oraz URI zdjęcia profilowego autora. Poniższy fragment kodu pokazuje pobieranie danych o atrybucji 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