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

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Zdjęcia miejsc umożliwiają dodawanie do stron internetowych wysokiej jakości treści fotograficznych. Na tej stronie wyjaśniamy różnice między funkcjami zdjęć miejsc w klasie Place (nowej) i PlacesService (starszej) oraz podajemy kilka fragmentów kodu do porównania.

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

W tabeli poniżej znajdziesz niektóre z głównych różnic w korzystaniu ze zdjęć miejsc między klasą Place a PlacesService:

PlacesService (starsza wersja) Place (Nowość)
Interfejs PlacePhoto Klasa Photo
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 odpowiedzi google.maps.places.PlacesServiceStatus. Używa obiektów Promise 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
Obiekt PlacesService musi zostać utworzony za pomocą mapy lub elementu div. Obiekt Place można utworzyć 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 pokazują kod wymagany do żądania zdjęć miejsc w poszczególnych interfejsach API.

Usługa Places (starsza wersja)

Poniższy fragment kodu pokazuje, jak zwrócić zdjęcia za pomocą PlacesService i wyświetlić pierwsze zdjęcie na stronie. W tym przykładzie żądanie informacji o miejscu określa identyfikator miejsca oraz pola name i photos. Po sprawdzeniu stanu usługi na stronie wyświetli się pierwsze zdjęcie. Podczas tworzenia instancji PlacesService należy określić mapę lub element div. Ponieważ w tym przykładzie nie ma 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 autorów w PlacesService

PlacesService zwraca wymagane informacje o autorze jako ciąg znaków html_attributions zawierający adres URL wskazujący stronę profilu Google autora. Poniższy fragment kodu pokazuje, jak pobrać dane o autorstwie pierwszego wyniku wyszukiwania zdjęć.

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

Więcej informacji

Klasa miejsca (nowość)

Ten fragment kodu pokazuje, jak użyć metody fetchFields(), aby zwrócić szczegółowe informacje o miejscu, w tym wyświetlaną nazwę i zdjęcia miejsca. Najpierw tworzona jest instancja nowego obiektu Place przy użyciu identyfikatora miejsca, a następnie wywoływana jest metoda fetchFields(), w której określone są pola displayName i photos. Na stronie pojawi się pierwsze zdjęcie miejsca. Nie musisz sprawdzać stanu usługi, gdy używasz klasy Place, 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 klasie Place

Klasa Place zwraca informacje o autorze jako instancję AuthorAttribution, która zawiera imię i nazwisko autora, identyfikator URI strony profilu Google autora oraz identyfikator URI zdjęcia profilowego autora. Poniższy fragment kodu pokazuje, jak pobrać dane o autorze 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