Eseguire la migrazione alle nuove recensioni dei luoghi

Sviluppatori dello Spazio economico europeo (SEE)

Le recensioni dei luoghi ti consentono di aggiungere recensioni e valutazioni degli utenti alle tue pagine web. Questa pagina spiega le differenze tra le recensioni dei luoghi utilizzate nelle classi Place (nuova) e PlacesService (legacy) e fornisce alcuni snippet di codice per il confronto.

  • PlacesService (legacy) restituisce un array di istanze PlaceReview come parte dell'oggetto PlaceResult per qualsiasi richiesta getDetails() se il campo reviews è specificato nella richiesta.
  • Place (nuovo) restituisce un array di istanze Review nell'ambito di una richiesta fetchFields() se il campo reviews è specificato nella richiesta.

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

PlacesService (legacy) Place (Nuovo)
Interfaccia PlaceReview Corso Review
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.
PlaceReview restituisce i dati di attribuzione per la recensione utilizzando i campi author_name, author_url e profile_photo_url. Review restituisce i dati di attribuzione per la recensione utilizzando un'istanza AuthorAttribution.

Confronto del codice

Questa sezione confronta il codice dei metodi di ricerca di testo per illustrare le differenze tra le recensioni di Place nella classe PlacesService precedente e in quella Place più recente.

Servizio Places (legacy)

Il seguente snippet chiama getDetails() per richiedere i dettagli del luogo, incluse le recensioni, e mostra il primo risultato della recensione in una finestra informativa.

const request = {
  placeId: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
  fields: ["name", "formatted_address", "geometry", "reviews"],
};
const service = new google.maps.places.PlacesService(map);

service.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    // If there are any reviews display the first one.
    if (place.reviews && place.reviews.length > 0) {
      // Get info for the first review.
      let reviewRating = place.reviews[0].rating;
      let reviewText = place.reviews[0].text;
      let authorName = place.reviews[0].author_name;
      let authorUri = place.reviews[0].author_url;

      // Format the review using HTML.
      contentString =`
            <div id="title"><b>${place.name}</b></div>
            <div id="address">${place.formatted_address}</div>
            <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
            <div id="rating">Rating: ${reviewRating} stars</div>
            <div id="rating"><p>Review: ${reviewText}</p></div>`;
    } else {
      contentString = `No reviews were found for ${place.name}`;
    }

    const infowindow = new google.maps.InfoWindow({
      content: contentString,
      ariaLabel: place.displayName,
    });

    // Add a marker.
    const marker = new google.maps.Marker({
      map,
      position: place.geometry.location,
    });

    // Show the info window.
    infowindow.open({
      anchor: marker,
      map,
    });
  }
});

Place class (novità)

Il seguente snippet chiama il metodo fetchFields() per richiedere i dettagli del luogo, comprese le recensioni, e mostra il primo risultato della recensione in una finestra informativa.

// Use a place ID to create a new Place instance.
const place = new google.maps.places.Place({
  id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
});

// Call fetchFields, passing 'reviews' and other needed fields.
await place.fetchFields({
  fields: ["displayName", "formattedAddress", "location", "reviews"],
});

// If there are any reviews display the first one.
if (place.reviews && place.reviews.length > 0) {
  // Get info for the first review.
  let reviewRating = place.reviews[0].rating;
  let reviewText = place.reviews[0].text;
  let authorName = place.reviews[0].authorAttribution.displayName;
  let authorUri = place.reviews[0].authorAttribution.uri;

  // Format the review using HTML.
  contentString =`
          <div id="title"><b>${place.displayName}</b></div>
          <div id="address">${place.formattedAddress}</div>
          <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
          <div id="rating">Rating: ${reviewRating} stars</div>
          <div id="rating"><p>Review: ${reviewText}</p></div>`;
} else {
  contentString = `No reviews were found for ${place.displayName}`;
}

// Create an infowindow to display the review.
infoWindow = new google.maps.InfoWindow({
  content: contentString,
  ariaLabel: place.displayName,
});

// Add a marker.
const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: place.location,
  title: place.displayName,
});

// Show the info window.
infoWindow.open({
  anchor: marker,
  map,
});