Eseguire la migrazione alle nuove foto dei luoghi

Sviluppatori dello Spazio economico europeo (SEE)

Place Photos ti consente di aggiungere contenuti fotografici di alta qualità alle tue pagine web. Questa pagina spiega le differenze tra le funzionalità delle foto dei luoghi nella classe Place (nuova) e PlacesService (legacy) e fornisce alcuni snippet di codice per il confronto.

  • PlacesService (legacy) restituisce un array di massimo 10 oggetti PlacePhoto come parte dell'oggetto PlaceResult per qualsiasi richiesta getDetails() se il campo photos è specificato nella richiesta. Nel caso di textSearch() e nearbySearch(), per impostazione predefinita viene restituita la prima foto del luogo, se disponibile.
  • La classe Place restituisce un array di massimo 10 oggetti Photo nell'ambito di una richiesta fetchFields() se il campo photos è specificato nella richiesta.

La seguente tabella elenca alcune delle principali differenze nell'utilizzo delle foto dei luoghi tra la classe Place e PlacesService:

PlacesService (Legacy) Place (Novità)
Interfaccia PlacePhoto Classe Photo
PlacePhoto restituisce html_attributions come stringa. Photo restituisce un'istanza AuthorAttribution.
I metodi richiedono l'utilizzo di un callback per gestire l'oggetto dei risultati e la risposta google.maps.places.PlacesServiceStatus. Utilizza le Promise e funziona in modo asincrono.
I metodi richiedono un controllo PlacesServiceStatus. Non è richiesto alcun controllo dello stato, è possibile utilizzare la gestione degli errori standard. Ulteriori informazioni.
PlacesService deve essere creata un'istanza utilizzando una mappa o un elemento div. Place può essere istanziato ovunque sia necessario, senza un riferimento a una mappa o a un elemento di pagina.

Confronto del codice

Questa sezione confronta il codice per le foto dei luoghi per illustrare le differenze tra il servizio Places e la classe Place. Gli snippet di codice mostrano il codice richiesto per richiedere le foto dei luoghi su ogni rispettiva API.

Servizio Places (legacy)

Lo snippet seguente mostra la restituzione delle foto utilizzando PlacesService e la visualizzazione del primo risultato della foto nella pagina. In questo esempio, la richiesta Place Details specifica un ID luogo, insieme ai campi name e photos. La prima foto viene quindi visualizzata nella pagina dopo aver controllato lo stato del servizio. Quando crei un'istanza di PlacesService, devi specificare una mappa o un elemento div. Poiché questo esempio non include una mappa, viene utilizzato un elemento 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});
    }
  });
}

Attribuzioni dell'autore in PlacesService

PlacesService restituisce le attribuzioni dell'autore richieste come stringa html_attributions contenente un URL che rimanda alla pagina del profilo Google dell'autore. Il seguente snippet mostra il recupero dei dati di attribuzione per il primo risultato della foto.

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

Scopri di più

Classe del luogo (nuova)

Lo snippet seguente mostra l'utilizzo del metodo fetchFields() per restituire i dettagli del luogo, inclusi il nome visualizzato e le foto del luogo. Innanzitutto, viene creata un'istanza di un nuovo oggetto Place utilizzando un ID luogo, seguita da una chiamata a fetchFields() in cui vengono specificati i campi displayName e photos. La prima foto del luogo viene quindi visualizzata nella pagina. Non è necessario controllare lo stato del servizio quando utilizzi la classe Place, poiché questa operazione viene gestita automaticamente.

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});
}

Attribuzioni dell'autore nella classe Place

La classe Place restituisce le attribuzioni dell'autore come istanza AuthorAttribution, che include il nome dell'autore, un URI per la pagina del profilo Google dell'autore e un URI per la foto del profilo dell'autore. Lo snippet seguente mostra il recupero dei dati di attribuzione per il primo risultato della foto.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

Scopri di più