Eseguire la migrazione ai nuovi dettagli dei luoghi

Sviluppatori dello Spazio economico europeo (SEE)

L'API Places può restituire informazioni dettagliate su un luogo specifico. Questa pagina spiega le differenze tra i dettagli dei luoghi 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 Place classe e PlacesService:

PlacesService (legacy) Place (nuova)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
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 di PlacesServiceStatus. Nessun controllo dello stato richiesto, è possibile utilizzare la gestione degli errori standard. Scopri di più.
I campi dei dati dei luoghi sono formattati utilizzando la notazione snake case. I campi dei dati dei luoghi sono formattati utilizzando la notazione camel case.
Limitato a un insieme fisso di tipi di luoghi e campi dei dati dei luoghi. Fornisce una selezione ampliata di tipi di luoghi e campi dei dati dei luoghi aggiornati regolarmente.

Confronto del codice

Questa sezione confronta due parti 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 API rispettiva per effettuare una richiesta di dettagli dei luoghi e quindi utilizzare i dati dei luoghi risultanti per aggiungere un indicatore alla mappa.

Servizio Places (legacy)

Il seguente snippet di codice condensato mostra come effettuare una richiesta di dettagli dei luoghi 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 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ù