PlaceAutocompleteElement class
google.maps.places.PlaceAutocompleteElement
classe
PlaceAutocompleteElement è una sottoclasse di HTMLElement
che fornisce un componente UI per l'API Places Autocomplete.
Elemento personalizzato:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng|lat,lng,altitude" requested-language="string" requested-region="string" unit-system="metric|imperial" types="type1 type2 type3..."></gmp-place-autocomplete>
Questo corso si estende
HTMLElement
.
Questa classe implementa
PlaceAutocompleteElementOptions
.
Accesso chiamando il numero const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
Costruttore | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) Parametri:
|
Proprietà | |
---|---|
|
Tipo:
Array<string> optional Tipo di luogo principale incluso (ad esempio "ristorante" o "stazione di servizio").
Un luogo viene restituito solo se il suo tipo principale è incluso in questo elenco. È possibile specificare fino a 5 valori. Se non vengono specificati tipi, vengono restituiti tutti i tipi di luoghi. Attributo HTML:
|
|
Tipo:
Array<string> optional Includi solo i risultati nelle regioni specificate, indicate come massimo 15 codici di regione CLDR di due caratteri. Un insieme vuoto non limiterà i risultati. Se sono impostati sia
locationRestriction sia includedRegionCodes , i risultati si troveranno nell'area di intersezione.Attributo HTML:
|
locationBias |
Tipo:
LocationBias optional Un confine o un suggerimento da utilizzare durante la ricerca di luoghi. |
locationRestriction |
Tipo:
LocationRestriction optional Confini per limitare i risultati di ricerca. |
name |
Tipo:
string optional Il nome da utilizzare per l'elemento di input. Per i dettagli, consulta la pagina https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name. Segue lo stesso comportamento dell'attributo nome per gli input. Tieni presente che questo è il nome che verrà utilizzato quando viene inviato un modulo. Per i dettagli, vai alla pagina https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
Attributo HTML:
|
|
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional L'origine da cui calcolare la distanza. Se non specificata, la distanza non viene calcolata. L'altitudine, se fornita, non viene utilizzata nel calcolo.
Attributo HTML:
|
requestedLanguage |
Tipo:
string optional Un identificatore di lingua per la lingua in cui devono essere restituiti i risultati, se possibile. Ai risultati nella lingua selezionata potrebbe essere assegnato un ranking più elevato, ma i suggerimenti non sono limitati a questa lingua. Consulta l'elenco delle lingue supportate.
Attributo HTML:
|
requestedRegion |
Tipo:
string optional Un codice regione utilizzato per la formattazione e il filtraggio dei risultati. Non limita i suggerimenti a questo paese. Il codice regione accetta un valore di due caratteri ccTLD ("dominio di primo livello"). La maggior parte dei codici ccTLD sono identici ai codici ISO 3166-1, con alcune eccezioni degne di nota. Ad esempio, il TLD nazionale del Regno Unito è "uk " (
.co.uk ), mentre il suo codice ISO 3166-1 è"gb " (tecnicamente per l'entità "Regno Unito di Gran Bretagna e Irlanda del Nord").Attributo HTML:
|
|
Tipo:
UnitSystem optional Il sistema di unità di misura utilizzato per visualizzare le distanze. Se non specificato, il sistema di unità viene determinato da requestedRegion.
Attributo HTML:
|
|
Tipo:
ComponentRestrictions optional Le limitazioni dei componenti. Le limitazioni dei componenti vengono utilizzate per limitare le previsioni solo a quelle all'interno del componente principale. Ad esempio, il paese. |
|
Tipo:
Array<string> optional I tipi di previsioni da restituire. Per i tipi supportati, consulta la guida per gli sviluppatori. Se non vengono specificati tipi, verranno restituiti tutti i tipi.
Attributo HTML:
|
Componenti | |
---|---|
prediction-item |
Un elemento nel menu a discesa delle previsioni che rappresenta una singola previsione. |
prediction-item-icon |
L'icona visualizzata a sinistra di ogni elemento nell'elenco dei suggerimenti. |
prediction-item-main-text |
Una parte dell'elemento di previsione che costituisce il testo principale della previsione. Per le località geografiche, contiene il nome di un luogo, ad esempio "Sydney", o il nome e il numero di una via, ad esempio "Via del Re, 10". Per impostazione predefinita, il testo principale dell'elemento di previsione è nero. Se nell'elemento di previsione è presente altro testo, questo si trova al di fuori di prediction-item-main-text e eredita lo stile da prediction-item. Per impostazione predefinita è colorato di grigio. Il testo aggiuntivo è in genere un indirizzo. |
prediction-item-match |
La parte della previsione restituita che corrisponde all'input dell'utente. Per impostazione predefinita, questo testo corrispondente viene evidenziato in grassetto. Tieni presente che il testo corrispondente può trovarsi ovunque all'interno di prediction-item. Non fa necessariamente parte di prediction-item-main-text. |
prediction-item-selected |
L'elemento quando l'utente lo seleziona tramite la tastiera. Nota: gli elementi selezionati saranno interessati sia dagli stili delle parti che dagli stili delle parti degli elementi di previsione. |
prediction-list |
L'elemento visivo contenente l'elenco delle previsioni restituite dal servizio Place Autocomplete. Questo elenco viene visualizzato come elenco a discesa sotto PlaceAutocompleteElement. |
Metodi | |
---|---|
|
addEventListener(type, listener[, options]) Parametri:
Valore restituito:
void Configura una funzione che verrà chiamata ogni volta che l'evento specificato viene inviato alla destinazione. Vedi addEventListener. |
|
removeEventListener(type, listener[, options]) Parametri:
Valore restituito:
void Rimuove dal target un listener di eventi registrato in precedenza con addEventListener. Vedi removeEventListener. |
Eventi | |
---|---|
gmp-error |
function(errorEvent) Argomenti:
Questo evento viene attivato quando una richiesta al backend è stata rifiutata (ad es. chiave API errata). Questo evento non viene propagato. |
gmp-select |
function(placePredictionSelectEvent) Argomenti:
Questo evento viene attivato quando un utente seleziona una previsione del luogo. Contiene un oggetto PlacePrediction che può essere convertito in un oggetto Place. |
|
function(placeAutocompletePlaceSelectEvent) Argomenti:
Questo evento viene attivato quando un utente seleziona una previsione del luogo. Contiene un oggetto Place. |
PlaceAutocompleteElementOptions
google.maps.places.PlaceAutocompleteElementOptions
interfaccia
Opzioni per la creazione di un elemento PlaceAutocompleteElement. Per la descrizione di ogni proprietà, fai riferimento alla proprietà con lo stesso nome nella classe PlaceAutocompleteElement.
Proprietà | |
---|---|
|
Tipo:
ComponentRestrictions optional |
|
Tipo:
Array<string> optional |
|
Tipo:
Array<string> optional |
locationBias optional |
Tipo:
LocationBias optional |
locationRestriction optional |
Tipo:
LocationRestriction optional |
name optional |
Tipo:
string optional |
|
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Tipo:
string optional |
|
Tipo:
Array<string> optional |
|
Tipo:
UnitSystem optional |
PlaceAutocompletePlaceSelectEvent class
google.maps.places.PlaceAutocompletePlaceSelectEvent
classe
Questo evento viene creato dopo che l'utente seleziona un luogo con l'elemento Place Autocomplete. Accedi alla selezione con event.place
.
Questo corso si estende
Event
.
Accesso chiamando il numero const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
Proprietà | |
---|---|
|
Tipo:
Place |
Classe PlacePredictionSelectEvent
google.maps.places.PlacePredictionSelectEvent
classe
Questo evento viene creato dopo che l'utente seleziona un elemento di previsione con PlaceAutocompleteElement. Accedi alla selezione con event.placePrediction
.
Questo corso si estende
Event
.
Accesso chiamando il numero const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
Proprietà | |
---|---|
placePrediction |
Tipo:
PlacePrediction |
PlaceAutocompleteRequestErrorEvent class
google.maps.places.PlaceAutocompleteRequestErrorEvent
classe
Questo evento viene emesso da PlaceAutocompleteElement quando si verifica un problema con la richiesta di rete.
Questo corso si estende
Event
.
Accesso chiamando il numero const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
PlaceDetailsElement class
google.maps.places.PlaceDetailsElement
classe
Un elemento HTML che mostra i dettagli di un luogo. Utilizza i metodi configureFromPlace()
o configureFromLocation()
per specificare i contenuti da visualizzare. Per utilizzare l'elemento Dettagli luogo, attiva l'API Places UI Kit per il tuo progetto in Google Cloud Console.
Elemento personalizzato:
<gmp-place-details size="small"></gmp-place-details>
Questo corso si estende
HTMLElement
.
Questa classe implementa
PlaceDetailsElementOptions
.
Accesso chiamando il numero const {PlaceDetailsElement} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
Costruttore | |
---|---|
PlaceDetailsElement |
PlaceDetailsElement([options]) Parametri:
|
Proprietà | |
---|---|
place |
Tipo:
Place optional Sola lettura. Oggetto Place contenente l'ID, la posizione e la finestra di visualizzazione del luogo attualmente visualizzato. |
size |
Tipo:
PlaceDetailsSize optional La variante di dimensione di PlaceDetailsElement. Per impostazione predefinita, l'elemento mostrerà
PlaceDetailsSize.X_LARGE .Attributo HTML:
|
Metodi | |
---|---|
|
addEventListener(type, listener[, options]) Parametri:
Valore restituito:
void Configura una funzione che verrà chiamata ogni volta che l'evento specificato viene inviato alla destinazione. Vedi addEventListener. |
configureFromLocation |
configureFromLocation(location) Parametri:
Valore restituito:
Promise<void> una promessa che viene risolta una volta caricati e visualizzati i dati del luogo.Configura il widget da un LatLng utilizzando il geocoding inverso. |
configureFromPlace |
configureFromPlace(place) Parametri:
Valore restituito:
Promise<void> una promessa che viene risolta una volta caricati e visualizzati i dati del luogo.Configura il widget da un oggetto Place o da un ID luogo. |
|
removeEventListener(type, listener[, options]) Parametri:
Valore restituito:
void Rimuove dal target un listener di eventi registrato in precedenza con addEventListener. Vedi removeEventListener. |
Eventi | |
---|---|
gmp-load |
function(event) Argomenti:
Questo evento viene attivato quando l'elemento carica e visualizza i suoi contenuti. Questo evento non viene propagato. |
gmp-requesterror |
function(event) Argomenti:
Questo evento viene attivato quando una richiesta al backend è stata rifiutata (ad es. chiave API errata). Questo evento non viene propagato. |
PlaceDetailsElementOptions interfaccia
google.maps.places.PlaceDetailsElementOptions
interfaccia
Opzioni per PlaceDetailsElement
.
Proprietà | |
---|---|
size optional |
Tipo:
PlaceDetailsSize optional Visualizza PlaceDetailsElement.size |
Costanti PlaceDetailsSize
google.maps.places.PlaceDetailsSize
costanti
Varianti di taglia per PlaceDetailsElement
.
Accesso chiamando il numero const {PlaceDetailsSize} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
Costanti | |
---|---|
LARGE |
Variante grande che include un'immagine grande, informazioni di base e dati di contatto. |
MEDIUM |
Variante media che include un'immagine grande e informazioni di base. |
SMALL |
Variante piccola che include un'immagine piccola e informazioni di base. |
X_LARGE |
Variante extra large che include un collage di foto, recensioni e informazioni complete sul luogo. |
PlaceListElement class
google.maps.places.PlaceListElement
classe
Un elemento HTML che mostra i risultati di una ricerca di luoghi in un elenco. Utilizza i metodi configureFromSearchByTextRequest()
o configureFromSearchNearbyRequest()
per specificare la richiesta per cui eseguire il rendering dei risultati. Per utilizzare l'elemento Elenco luoghi, attiva l'API Places UI Kit per il tuo progetto nella console Google Cloud.
Elemento personalizzato:
<gmp-place-list selectable></gmp-place-list>
Questo corso si estende
HTMLElement
.
Questa classe implementa
PlaceListElementOptions
.
Accesso chiamando il numero const {PlaceListElement} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
Costruttore | |
---|---|
PlaceListElement |
PlaceListElement([options]) Parametri:
|
Proprietà | |
---|---|
places |
Sola lettura. Array di oggetti Place contenenti gli ID, le posizioni e i viewport dei luoghi attualmente visualizzati. |
selectable |
Tipo:
boolean Indica se gli elementi dell'elenco sono selezionabili. Se il valore è true, gli elementi dell'elenco saranno pulsanti che attivano l'evento
gmp-placeselect quando vengono selezionati. Sono supportate anche la navigazione e la selezione da tastiera accessibili.Attributo HTML:
|
Metodi | |
---|---|
|
addEventListener(type, listener[, options]) Parametri:
Valore restituito:
void Configura una funzione che verrà chiamata ogni volta che l'evento specificato viene inviato alla destinazione. Vedi addEventListener. |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request) Parametri:
Valore restituito:
Promise<void> una promessa che viene risolta una volta caricati e visualizzati i dati del luogo.Configura il widget per visualizzare i risultati di ricerca da una richiesta dell'API Places Text Search. |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request) Parametri:
Valore restituito:
Promise<void> una promessa che viene risolta una volta caricati e visualizzati i dati del luogo.Configura il widget per visualizzare i risultati di ricerca da una richiesta dell'API Places Nearby Search. |
|
removeEventListener(type, listener[, options]) Parametri:
Valore restituito:
void Rimuove dal target un listener di eventi registrato in precedenza con addEventListener. Vedi removeEventListener. |
Eventi | |
---|---|
gmp-load |
function(event) Argomenti:
Questo evento viene attivato quando l'elemento carica e visualizza i suoi contenuti. Questo evento non viene propagato. |
gmp-placeselect |
function(event) Argomenti:
Questo evento viene attivato quando un utente seleziona un luogo. Contiene un oggetto Place e l'indice del luogo selezionato nell'elenco. |
gmp-requesterror |
function(event) Argomenti:
Questo evento viene attivato quando una richiesta al backend è stata rifiutata (ad es. chiave API errata). Questo evento non viene propagato. |
Interfaccia PlaceListElementOptions
google.maps.places.PlaceListElementOptions
interfaccia
Opzioni per PlaceListElement
.
Proprietà | |
---|---|
selectable optional |
Tipo:
boolean optional Visualizza PlaceListElement.selectable |
PlaceListPlaceSelectEvent class
google.maps.places.PlaceListPlaceSelectEvent
classe
Questo evento viene emesso da PlaceListElement
quando l'utente seleziona un luogo.
Questo corso si estende
Event
.
Accesso chiamando il numero const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
Proprietà | |
---|---|
index |
Tipo:
number L'indice dell'elenco del luogo selezionato. |
place |
Tipo:
Place Un oggetto Place contenente l'ID, la posizione e la visualizzazione del luogo selezionato. |
Classe Autocomplete
google.maps.places.Autocomplete
classe
Un widget che fornisce previsioni sui luoghi in base all'input di testo di un utente. Si collega a un elemento di input di tipo text
e ascolta l'inserimento di testo in quel campo. L'elenco delle previsioni viene visualizzato come elenco a discesa e viene aggiornato man mano che viene inserito il testo.
Questo corso si estende
MVCObject
.
Accesso chiamando il numero const {Autocomplete} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
Costruttore | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) Parametri:
Crea una nuova istanza di Autocomplete che si collega al campo di testo di input specificato con le opzioni indicate. |
Metodi | |
---|---|
getBounds |
getBounds() Parametri: nessuno
Valore restituito:
LatLngBounds|undefined i limiti di distorsione.Restituisce i limiti a cui sono soggette le previsioni. |
getFields |
getFields() Parametri: nessuno
Valore restituito:
Array<string>|undefined Restituisce i campi da includere nella risposta dei dettagli del luogo quando i dettagli vengono recuperati correttamente. Per un elenco dei campi, vedi PlaceResult . |
getPlace |
getPlace() Parametri: nessuno
Valore restituito:
PlaceResult il luogo selezionato dall'utente.Restituisce i dettagli del luogo selezionato dall'utente se sono stati recuperati correttamente. In caso contrario, restituisce un oggetto Place stub, con la proprietà name impostata sul valore corrente del campo di input. |
setBounds |
setBounds(bounds) Parametri:
Valore restituito:nessuno
Imposta l'area preferita in cui restituire i risultati di Places. I risultati sono orientati verso questa zona, ma non sono limitati a questa. |
setComponentRestrictions |
setComponentRestrictions(restrictions) Parametri:
Valore restituito:nessuno
Imposta le limitazioni dei componenti. Le limitazioni dei componenti vengono utilizzate per limitare le previsioni solo a quelle all'interno del componente principale. Ad esempio, il paese. |
setFields |
setFields(fields) Parametri:
Valore restituito:nessuno
Imposta i campi da includere nella risposta dei dettagli quando i dettagli vengono recuperati correttamente. Per un elenco dei campi, vedi PlaceResult . |
setOptions |
setOptions(options) Parametri:
Valore restituito:nessuno
|
setTypes |
setTypes(types) Parametri:
Valore restituito:nessuno
Imposta i tipi di previsioni da restituire. Per i tipi supportati, consulta la guida per gli sviluppatori. Se non vengono specificati tipi, verranno restituiti tutti i tipi. |
Ereditato:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Eventi | |
---|---|
place_changed |
function() Argomenti: nessuno
Questo evento viene attivato quando un PlaceResult viene reso disponibile per un luogo selezionato dall'utente. Se l'utente inserisce il nome di un luogo non suggerito dal controllo e preme il tasto Invio oppure se una richiesta di dettagli sul luogo non va a buon fine, PlaceResult contiene l'input dell'utente nella proprietà name , senza altre proprietà definite. |
Interfaccia AutocompleteOptions
google.maps.places.AutocompleteOptions
interfaccia
Le opzioni che possono essere impostate su un oggetto Autocomplete
.
Proprietà | |
---|---|
bounds optional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optional L'area in cui cercare i luoghi. |
componentRestrictions optional |
Tipo:
ComponentRestrictions optional Le limitazioni dei componenti. Le limitazioni dei componenti vengono utilizzate per limitare le previsioni solo a quelle all'interno del componente principale. Ad esempio, il paese. |
fields optional |
Tipo:
Array<string> optional Campi da includere nella risposta dei dettagli quando i dettagli vengono recuperati correttamente, per i quali verrà addebitato un costo. Se viene passato ['ALL'] , verranno restituiti e fatturati tutti i campi disponibili (questa operazione non è consigliata per le implementazioni di produzione). Per un elenco dei campi, vedi PlaceResult . I campi nidificati possono essere specificati con percorsi con punti (ad esempio "geometry.location" ). Il valore predefinito è ['ALL'] . |
|
Tipo:
boolean optional Indica se recuperare solo gli ID luogo. Il PlaceResult reso disponibile quando viene attivato l'evento place_changed avrà solo i campi place_id, types e name, con place_id, types e description restituiti dal servizio Autocomplete. Disabilitato per impostazione predefinita. |
strictBounds optional |
Tipo:
boolean optional Un valore booleano che indica che il widget Autocomplete deve restituire solo i luoghi che si trovano all'interno dei limiti del widget Autocomplete al momento dell'invio della query. Se imposti strictBounds su false (valore predefinito), i risultati saranno orientati verso i luoghi contenuti all'interno dei limiti, ma non limitati a questi. |
types optional |
Tipo:
Array<string> optional I tipi di previsioni da restituire. Per i tipi supportati, consulta la guida per gli sviluppatori. Se non vengono specificati tipi, verranno restituiti tutti i tipi. |
SearchBox class
google.maps.places.SearchBox
classe
Un widget che fornisce previsioni delle query in base all'input di testo di un utente. Si collega a un elemento di input di tipo text
e ascolta l'inserimento di testo in quel campo. L'elenco delle previsioni viene visualizzato come elenco a discesa e viene aggiornato man mano che viene inserito il testo.
Questo corso si estende
MVCObject
.
Accesso chiamando il numero const {SearchBox} = await google.maps.importLibrary("places")
.
Consulta Librerie nell'API Maps JavaScript.
Costruttore | |
---|---|
SearchBox |
SearchBox(inputField[, opts]) Parametri:
Crea una nuova istanza di SearchBox che si collega al campo di testo di input specificato con le opzioni indicate. |
Metodi | |
---|---|
getBounds |
getBounds() Parametri: nessuno
Valore restituito:
LatLngBounds|undefined Restituisce i limiti a cui sono orientate le previsioni delle query. |
getPlaces |
getPlaces() Parametri: nessuno
Valore restituito:
Array<PlaceResult>|undefined Restituisce la query selezionata dall'utente da utilizzare con l'evento places_changed . |
setBounds |
setBounds(bounds) Parametri:
Valore restituito:nessuno
Imposta la regione da utilizzare per la distorsione delle previsioni delle query. I risultati saranno orientati solo verso questa area e non saranno completamente limitati. |
Ereditato:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Eventi | |
---|---|
places_changed |
function() Argomenti: nessuno
Questo evento viene attivato quando l'utente seleziona una query. getPlaces deve essere utilizzato per ottenere nuovi luoghi. |
Interfaccia SearchBoxOptions
google.maps.places.SearchBoxOptions
interfaccia
Le opzioni che possono essere impostate su un oggetto SearchBox
.
Proprietà | |
---|---|
bounds optional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optional L'area verso cui orientare le previsioni delle query. Le previsioni sono orientate verso, ma non limitate a, query che hanno come target questi limiti. |