Eseguire la migrazione alle nuove foto dei luoghi

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

  • PlacesService (legacy) restituisce un array di massimo 10 PlacePhoto oggetti nell'ambito 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 nella richiesta è specificato il campo photos.

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 Corso Photo
PlacePhoto restituisce html_attributions come stringa. Photo restituisce un'istanza AuthorAttribution.
I metodi richiedono l'utilizzo di un callback per gestire l'oggetto 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.
PlacesService deve essere istanziato utilizzando una mappa o un elemento div. Place può essere istanziato dove necessario, senza fare 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 necessario per richiedere foto dei luoghi su ciascuna rispettiva API.

Servizio Luoghi (legacy)

Lo snippet seguente mostra le foto restituite utilizzando PlacesService e la visualizzazione del primo risultato fotografico nella pagina. In questo esempio, la richiesta di dettagli sul luogo specifica un ID luogo, insieme ai campi name e photos. La prima foto viene visualizzata nella pagina dopo aver controllato lo stato del servizio. Quando viene creata un'istanza di PlacesService, deve essere specificata 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});
    }
  });
}

Attribuzione 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 fotografico.

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

Scopri di più

Classe Place (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 creato un nuovo oggetto Place utilizzando un ID luogo, seguito da una chiamata a fetchFields() in cui sono specificati i campi displayName e photos. La foto del primo luogo viene visualizzata nella pagina. Non è necessario controllare lo stato del servizio quando si utilizza la classe Place, poiché viene gestito 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, inclusi 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 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ù