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 nella classe Place(nuova) e PlacesService (legacy) e fornisce alcuni snippet di codice per il confronto.

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

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

PlacesService (legacy) Place (nuova)
PlaceReview interfaccia Review classe
I metodi richiedono l'utilizzo di un callback per gestire l'oggetto dei risultati e google.maps.places.PlacesServiceStatus risposta. 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. Scopri di più.
PlacesService deve essere creata un'istanza utilizzando una mappa o un elemento div. È possibile creare un'istanza di Place 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' AuthorAttribution istanza.

Confronto del codice

Questa sezione confronta il codice per i metodi di ricerca testuale per illustrare le differenze tra le recensioni dei luoghi in PlacesService legacy e la classe Place più recente.

Servizio Places (legacy)

Lo snippet seguente chiama getDetails() per richiedere i dettagli del luogo, incluse le recensioni, e visualizza 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,
    });
  }
});

Classe Place (nuova)

Lo snippet seguente chiama fetchFields() metodo per richiedere i dettagli del luogo, incluse le recensioni, e visualizza 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,
});