Il widget Place Autocomplete crea un campo di immissione di testo, fornisce le previsioni sui luoghi in un elenco di selezione dell'interfaccia utente e restituisce un luogo dettagli in risposta alla selezione dell'utente. Utilizza il widget Place Autocomplete per incorporare una un'interfaccia utente con completamento automatico indipendente sulla tua pagina web.
Prerequisiti
Per utilizzare Place Autocomplete (anteprima), devi abilitare "API Places" sul tuo Google Cloud
e specifica il canale beta (v: "beta"
) nel tuo bootstrap loader. Consulta
Inizia per maggiori dettagli.
Novità
Il completamento automatico del luogo (anteprima) è stato migliorato nei seguenti modi:
- L'interfaccia utente del widget Completamento automatico supporta la localizzazione regionale (incluse le lingue RTL), per segnaposto di input di testo, logo dell'elenco delle previsioni e previsioni dei luoghi.
- Accessibilità migliorata, compreso il supporto per screen reader e l'interazione con la tastiera.
- Il widget Autocomplete restituisce la nuova classe Place. per semplificare la gestione dell'oggetto restituito.
- Supporto migliorato per dispositivi mobili e schermi piccoli.
- Prestazioni migliori e aspetto grafico migliorato.
Aggiungi un widget di completamento automatico
Puoi aggiungere un widget di completamento automatico a una pagina web o a una mappa Google. Il widget di completamento automatico crea
un campo di immissione di testo, fornisce previsioni sui luoghi in un elenco di selezione dell'interfaccia utente e restituisce i dettagli dei luoghi in
risposta al clic di un utente tramite il listener gmp-placeselect
. Questa sezione mostra
come aggiungere un widget di completamento automatico a una pagina web o a una mappa Google.
Aggiungere un widget di completamento automatico a una pagina web
Per aggiungere il widget di completamento automatico a una pagina web, crea un nuovo google.maps.places.PlaceAutocompleteElement
e aggiungilo a
la pagina come mostrato nell'esempio seguente:
TypeScript
// Request needed libraries. //@ts-ignore await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete);
JavaScript
// Request needed libraries. //@ts-ignore await google.maps.importLibrary("places"); // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete);
Guarda l'esempio di codice completo
Aggiungere un widget di completamento automatico a una mappa
Per aggiungere un widget di completamento automatico a una mappa, crea una nuova istanza google.maps.places.PlaceAutocompleteElement
, aggiungi il
PlaceAutocompleteElement
a div
e inseriscilo sulla mappa come
come mostrato nell'esempio seguente:
TypeScript
//@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = 'place-autocomplete-input'; const card = document.getElementById('place-autocomplete-card') as HTMLElement; //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
JavaScript
//@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = "place-autocomplete-input"; const card = document.getElementById("place-autocomplete-card"); //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
Guarda l'esempio di codice completo
Limita previsioni di completamento automatico
Per impostazione predefinita, Place Autocomplete presenta tutti i tipi di luogo, con una differenziazione delle previsioni in base alle posizione e recupera tutti i campi di dati disponibili per il luogo selezionato dell'utente. Imposta luogo Opzioni di completamento automatico per presentare previsioni più pertinenti, limitando o differenziando i risultati.
Se limiti i risultati, il widget di completamento automatico ignora tutti i risultati al di fuori del area ad accesso limitato. È prassi comune limitare i risultati ai limiti della mappa. Differenziazione dei risultati mostra al widget di completamento automatico i risultati all'interno dell'area specificata, ma alcune corrispondenze potrebbero essere al di fuori di quell'area.
Limita la ricerca di luoghi per paese
Per limitare la ricerca di luoghi a uno o più paesi specifici, utilizza l'componentRestrictions
per specificare i codici paese come mostrato nello snippet seguente:
const pac = new google.maps.places.PlaceAutocompleteElement({ componentRestrictions: {country: ['us', 'au']}, });
Limita la ricerca dei luoghi ai confini della mappa
Per limitare la ricerca di luoghi ai confini di una mappa, utilizza l'locationRestrictions
per aggiungere i limiti, come mostrato nello snippet seguente:
const pac = new google.maps.places.PlaceAutocompleteElement({ locationRestriction: map.getBounds(), });
Quando limiti i limiti della mappa, assicurati di aggiungere un listener per aggiornare i limiti quando cambiano:
map.addListener('bounds_changed', () => { autocomplete.locationRestriction = map.getBounds(); });
Per rimuovere locationRestriction
, impostalo su null
.
Risultati di ricerca per posizionamento bias
Applica la differenziazione dei risultati di ricerca a un'area circolare utilizzando la proprietà locationBias
, e
passando un raggio, come mostrato qui:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}}, });
Per rimuovere locationBias
, impostalo su null
.
Limita i risultati di ricerca dei luoghi a determinati tipi
Limita i risultati di ricerca dei luoghi a determinati tipi di luoghi utilizzando l'types
e specificando uno o più tipi, come mostrato di seguito:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ types: ['establishment'], });
Per un elenco completo dei tipi supportati, consulta la Tabella 3: Tipi supportati nelle richieste di completamento automatico.
Visualizza i dettagli del luogo
Per ottenere i dettagli del luogo selezionato, aggiungi un listener gmp-place-select
a
PlaceAutocompleteElement
, come mostrato nell'esempio seguente:
TypeScript
// Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2); });
JavaScript
// Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); selectedPlaceTitle.textContent = "Selected Place:"; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2, ); });
Guarda l'esempio di codice completo
Nell'esempio precedente, il listener di eventi restituisce un oggetto Place class.
Chiama place.fetchFields()
per ottenere i campi di dati Place Details
necessario per la tua applicazione.
Il listener nell'esempio successivo richiede le informazioni sul luogo e le visualizza su una mappa.
TypeScript
// Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' + '<span id="place-address">' + place.formattedAddress + '</span>' + '</div>'; updateInfoWindow(content, place.location); marker.position = place.location; });
JavaScript
// Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + "</span><br />" + '<span id="place-address">' + place.formattedAddress + "</span>" + "</div>"; updateInfoWindow(content, place.location); marker.position = place.location; });
Guarda l'esempio di codice completo
Ricevi risultati di geocodifica per il luogo selezionato
Per ottenere risultati di geocodifica per il luogo selezionato, usa google.maps.Geocoder
per ottenere
la sede, come mostrato nello snippet seguente:
const map = new google.maps.Map(document.getElementById('map'), { center: {lat: 50.064192, lng: -130.605469}, zoom: 3, }); const marker = new google.maps.Marker({map}); const autocomplete = new google.maps.places.PlaceAutocompleteElement(); const geocoder = new google.maps.Geocoder(); autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => { const results = await geocoder.geocode({place.id}); marker.setPlace({ placeId: place.id, location: results[0].geometry.location, }); });
Mappe di esempio
Questa sezione contiene il codice completo per le mappe di esempio presenti in questa pagina.
Elemento di completamento automatico
In questo esempio viene aggiunto un widget di completamento automatico a una pagina web e vengono visualizzati i risultati per ogni posto selezionato.
TypeScript
async function initMap(): Promise<void> { // Request needed libraries. //@ts-ignore await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement('p'); selectedPlaceTitle.textContent = ''; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement('pre'); selectedPlaceInfo.textContent = ''; document.body.appendChild(selectedPlaceInfo); // Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2); }); } initMap();
JavaScript
async function initMap() { // Request needed libraries. //@ts-ignore await google.maps.importLibrary("places"); // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement("p"); selectedPlaceTitle.textContent = ""; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement("pre"); selectedPlaceInfo.textContent = ""; document.body.appendChild(selectedPlaceInfo); // Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); selectedPlaceTitle.textContent = "Selected Place:"; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2, ); }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } p { font-family: Roboto, sans-serif; font-weight: bold; }
HTML
<html> <head> <title>Place Autocomplete element</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <p style="font-family: roboto, sans-serif">Search for a place here:</p> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>
Prova Sample
Mappa con completamento automatico
Questo esempio mostra come aggiungere un widget di completamento automatico a una mappa di Google.
TypeScript
let map: google.maps.Map; let marker: google.maps.marker.AdvancedMarkerElement; let infoWindow: google.maps.InfoWindow; async function initMap(): Promise<void> { // Request needed libraries. //@ts-ignore const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary("marker"), google.maps.importLibrary("places") ]); // Initialize the map. map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: { lat: 40.749933, lng: -73.98633 }, zoom: 13, mapId: '4504f8b37365c3d0', mapTypeControl: false, }); //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = 'place-autocomplete-input'; const card = document.getElementById('place-autocomplete-card') as HTMLElement; //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card); // Create the marker and infowindow marker = new google.maps.marker.AdvancedMarkerElement({ map, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' + '<span id="place-address">' + place.formattedAddress + '</span>' + '</div>'; updateInfoWindow(content, place.location); marker.position = place.location; }); } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, anchor: marker, shouldFocus: false, }); } initMap();
JavaScript
let map; let marker; let infoWindow; async function initMap() { // Request needed libraries. //@ts-ignore const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary("marker"), google.maps.importLibrary("places"), ]); // Initialize the map. map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40.749933, lng: -73.98633 }, zoom: 13, mapId: "4504f8b37365c3d0", mapTypeControl: false, }); //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = "place-autocomplete-input"; const card = document.getElementById("place-autocomplete-card"); //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card); // Create the marker and infowindow marker = new google.maps.marker.AdvancedMarkerElement({ map, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + "</span><br />" + '<span id="place-address">' + place.formattedAddress + "</span>" + "</div>"; updateInfoWindow(content, place.location); marker.position = place.location; }); } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, anchor: marker, shouldFocus: false, }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #place-autocomplete-card { background-color: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 10px; padding: 5px; font-family: Roboto, sans-serif; font-size: large; font-weight: bold; } gmp-place-autocomplete { width: 300px; } #infowindow-content .title { font-weight: bold; } #map #infowindow-content { display: inline; }
HTML
<html> <head> <title>Place Autocomplete map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div class="place-autocomplete-card" id="place-autocomplete-card"> <p>Search for a place here:</p> </div> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>
Prova Sample
Utilizzare il componente Selettore luogo
Nota: questo esempio utilizza una libreria open source. Consulta le README per ricevere assistenza e feedback relativi alla raccolta.
Il componente selettore di luoghi è un input di testo che consente agli utenti finali di cercare un a un indirizzo o a un luogo specifici utilizzando il completamento automatico. Fa parte della libreria dei componenti estesi, un insieme di componenti web che aiutano gli sviluppatori a creare più velocemente mappe e funzioni di geolocalizzazione migliori.
Configuratore del selettore di luoghi
Utilizza lo strumento di configurazione per creare un codice incorporabile per un componente Selettore luoghi personalizzato, quindi esporta può essere utilizzato con framework popolari come React e Angular o nessun framework.
Inizia
Per iniziare, carica la libreria dei componenti estesi con npm.
Per ottenere le migliori prestazioni, utilizza un gestore di pacchetti e importa solo i componenti necessari. Questo pacchetto è elencato su npm come @googlemaps/extended-component-library. Installalo con:
npm i @googlemaps/extended-component-library;
Quindi importa tutti i componenti che utilizzi nell'applicazione.
import '@googlemaps/extended-component-library/place_picker.js';
Dopo aver caricato la libreria npm, ottenere una chiave API dalla console Cloud.
<gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>
Utilizza il tag del componente selettore luoghi.
<gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%"> </gmpx-place-picker>
Per ulteriori dettagli, consulta GitHub o npm. Per vedere i componenti utilizzati nel codice di esempio, dai un'occhiata al examples su GitHub.