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. Na tej stronie wyjaśniamy różnice między funkcjami zdjęć miejsc w Place klasie (nowa) i PlacesService (starsza wersja) oraz podajemy kilka fragmentów kodu do porównania.

  • PlacesService (starsza wersja) zwraca tablicę zawierającą maksymalnie 10 PlacePhoto obiektów jako część 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 jako część żą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 należy utworzyć 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ą Places a klasą Place. Fragmenty kodu pokazują kod wymagany do wysłania żądania zdjęć miejsc w każdym interfejsie API.

Usługa Places (starsza wersja)

Poniższy fragment kodu pokazuje zwracanie zdjęć za pomocą PlacesService i wyświetlanie pierwszego 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żywamy 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 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 pierwszego zdjęcia.

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

Więcej informacji

Klasa Place (nowa wersja)

Poniższy fragment kodu pokazuje użycie metody fetchFields() do zwracania szczegółów miejsca, w tym nazwy wyświetlanej i zdjęć miejsca. Najpierw tworzymy nowy obiekt Place za pomocą identyfikatora miejsca, a następnie wywołujemy metodę fetchFields(), w której określamy 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, adres URI strony profilu autora w Google oraz adres URI zdjęcia profilowego autora. Poniższy fragment kodu pokazuje pobieranie danych atrybucji pierwszego 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