Eseguire la migrazione ai nuovi dettagli dei luoghi

L'API Places può restituire informazioni dettagliate su un luogo specifico. Questa pagina illustra le differenze tra i dettagli dei luoghi come utilizzati nella classe Place (nuova) e PlacesService (legacy) e fornisce alcuni snippet di codice per il confronto. La seguente tabella elenca alcune delle principali differenze nell'utilizzo dei dettagli dei luoghi tra la classe Place e PlacesService:

PlacesService (legacy) Place (novità)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
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.
I campi dei dati dei luoghi sono formattati utilizzando il nome in minuscolo con lettere iniziali maiuscole. I campi di dati dei luoghi sono formattati utilizzando il camel case.
Limitato a un insieme fisso di tipi di luoghi e campi di dati sui luoghi. Offre una selezione ampliata di tipi di luoghi e campi di dati dei luoghi aggiornati regolarmente.

Confronto del codice

Questa sezione confronta due frammenti di codice simili per illustrare le differenze tra il servizio Places e la classe Place. Gli snippet di codice mostrano il codice richiesto su ogni rispettiva API per effettuare una richiesta di dettagli dei luoghi, quindi utilizzano i dati dei luoghi risultanti per aggiungere un indicatore alla mappa.

Servizio Luoghi (legacy)

Il seguente snippet di codice condensato mostra come effettuare una richiesta di dettagli del luogo utilizzando PlacesService. La richiesta utilizza un callback e include un controllo condizionale obbligatorio su PlacesServiceStatus. I campi dei dati dei luoghi necessari sono specificati nel corpo della richiesta.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

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

Scopri di più

Classe Place (nuova)

Il seguente snippet di codice condensato mostra come effettuare una richiesta di dettagli dei luoghi utilizzando la classe Place. La richiesta è asincrona e non include un controllo dello stato (è possibile utilizzare la gestione degli errori standard). Un ID luogo viene utilizzato per creare una nuova istanza di Place, che viene utilizzata per effettuare la richiesta (fetchFields()). I campi dei dati dei luoghi necessari non vengono passati finché non viene chiamato fetchFields(), il che offre una maggiore flessibilità. Poiché il metodo fetchFields() utilizza l'operatore await, può essere utilizzato solo all'interno di una funzione async.

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

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

Scopri di più