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(), la prima foto del luogo viene restituita per impostazione predefinita, se disponibile.
  • La classe Place restituisce un array di massimo 10 oggetti Photo nell'ambito di una richiesta fetchFields() se nella richiesta è specificato il campo photos.

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

PlacesService (legacy) Place (nuovo)
Interfaccia PlacePhoto 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 promesse e funziona in modo asincrono.
I metodi richiedono un controllo PlacesServiceStatus. Nessun controllo dello stato richiesto, è possibile utilizzare la gestione degli errori standard. Ulteriori informazioni.
PlacesService deve essere istanziato utilizzando una mappa o un elemento div. Place può essere istanziato ovunque sia necessario, senza un riferimento a una mappa o a un elemento della 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 necessario per richiedere le foto dei luoghi su ciascuna API.

Servizio Places (legacy)

Lo snippet riportato di seguito mostra la restituzione delle foto utilizzando PlacesService e la visualizzazione del primo risultato fotografico nella pagina. In questo esempio, la richiesta di dettagli del luogo specifica un ID luogo, insieme ai campi name e photos. La prima foto viene quindi visualizzata sulla pagina dopo aver controllato lo stato del servizio. Quando viene creata un'istanza di PlacesService, deve essere specificato un elemento mappa o 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 degli autori 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 fotografico.

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

Scopri di più

Place class (new)

Il seguente snippet mostra l'utilizzo del metodo fetchFields() per restituire i dettagli del luogo, inclusi il nome visualizzato e le foto del luogo. Innanzitutto, viene istanziato un nuovo oggetto Place utilizzando un ID luogo, seguito da una chiamata a fetchFields() in cui vengono specificati i campi displayName e photos. La foto del primo 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 di 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. Il seguente snippet mostra il recupero dei dati di attribuzione per il primo risultato fotografico.

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ù