widżet autouzupełniania miejsca, tworzy pole do wprowadzania tekstu, dostarcza prognozy miejsc na liście wyboru interfejsu i zwraca miejsce szczegóły w odpowiedzi na wybór użytkownika. Używanie widżetu autouzupełniania miejsc w celu umieszczenia ukończonego niezależnego interfejsu autouzupełniania na Twojej stronie internetowej.
Wymagania wstępne
Aby korzystać z autouzupełniania miejsc (wersja testowa), musisz włączyć interfejs „Places API” w Google Cloud
projektu i określić kanał beta (v: "beta"
) w programie wczytywania. Zobacz
Rozpocznij.
Nowości
Autouzupełnianie miejsc (podgląd) zostało ulepszone na kilka sposobów:
- Interfejs widżetu autouzupełniania obsługuje lokalizację regionalną (w tym języki RTL), w przypadku Obiekt zastępczy do wprowadzania tekstu, logo z listą prognoz i prognozami miejsc.
- Ulepszone ułatwienia dostępu, w tym obsługa czytników ekranu i interakcji z klawiaturą.
- Widżet autouzupełniania zwraca nową klasę Place. aby uprościć obsługę zwróconego obiektu.
- Lepsza obsługa urządzeń mobilnych i małych ekranów.
- Większa wydajność i lepszy wygląd grafiki.
Dodawanie widżetu autouzupełniania
Widżet autouzupełniania możesz dodać do strony internetowej lub mapy Google. Widżet autouzupełniania tworzy
pola do wprowadzania tekstu, dostarcza prognozy miejsc na liście wyboru UI i zwraca szczegółowe informacje
w odpowiedzi na kliknięcie użytkownika w detektorze gmp-placeselect
. Ta sekcja pokazuje
jak dodać widżet autouzupełniania do strony internetowej lub Map Google.
Dodawanie widżetu autouzupełniania do strony internetowej
Aby dodać widżet autouzupełniania do strony internetowej, utwórz nowy element google.maps.places.PlaceAutocompleteElement
i dołącz go do
w następujący sposób:
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);
Dodawanie widżetu autouzupełniania do mapy
Aby dodać widżet autouzupełniania do mapy, utwórz nowe wystąpienie google.maps.places.PlaceAutocompleteElement
, dołącz znak
PlaceAutocompleteElement
do div
i wepchnij go na mapę jako niestandardowy
jak w tym przykładzie:
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);
Ogranicz podpowiedzi autouzupełniania
Domyślnie autouzupełnianie miejsc przedstawia wszystkie typy miejsc, a ponadto pokazuje podpowiedzi w pobliżu i pobiera wszystkie dostępne pola danych dotyczące wybranego miejsca. Ustaw miejsce Opcje autouzupełniania pozwalające wyświetlać trafniejsze podpowiedzi przez ograniczanie lub promowanie wyników.
Ograniczenie wyników powoduje, że widżet autouzupełniania ignoruje wszystkie wyniki, które nie znajdują się objęte ograniczeniami. Zalecaną praktyką jest ograniczanie wyników do granic mapy. Wyniki promowania sprawia, że widżet autouzupełniania wyświetla wyniki z określonego obszaru, ale niektóre dopasowania mogą być poza nią.
Ogranicz wyszukiwanie miejsc według kraju
Aby ograniczyć wyszukiwanie miejsc do jednego lub kilku konkretnych krajów, użyj componentRestrictions
w celu określenia kodów kraju, jak pokazano w tym fragmencie:
const pac = new google.maps.places.PlaceAutocompleteElement({ componentRestrictions: {country: ['us', 'au']}, });
Ogranicz wyszukiwanie miejsc do granic mapy
Aby ograniczyć wyszukiwanie miejsc do granic mapy, użyj locationRestrictions
dodaj granice, tak jak w tym fragmencie:
const pac = new google.maps.places.PlaceAutocompleteElement({ locationRestriction: map.getBounds(), });
Gdy ograniczasz obszar do granic mapy, dodaj detektor, aby aktualizować granice, gdy się zmienią:
map.addListener('bounds_changed', () => { autocomplete.locationRestriction = map.getBounds(); });
Aby usunąć przycisk locationRestriction
, ustaw go na null
.
Uprzedzenia wyników wyszukiwania miejsc
Uprzedzenia umieszczaj wyniki wyszukiwania na obszarze okręgu za pomocą właściwości locationBias
, a
przechodząc promień, tak jak tutaj:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}}, });
Aby usunąć przycisk locationBias
, ustaw go na null
.
Ograniczanie wyników wyszukiwania miejsc do określonych typów
Ogranicz wyniki wyszukiwania miejsc do określonych typów miejsc, używając: types
i określać co najmniej jeden typ, jak poniżej:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ types: ['establishment'], });
Pełną listę obsługiwanych typów znajdziesz w tabeli 3. Typy obsługiwanych w żądaniach autouzupełniania miejsc.
Pobierz informacje o miejscu
Aby uzyskać szczegółowe informacje o wybranym miejscu, dodaj detektor gmp-place-select
do
PlaceAutocompleteElement
zgodnie z tym przykładem:
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, ); });
W poprzednim przykładzie detektor zdarzeń zwraca obiekt klasy Place.
Zadzwoń pod numer place.fetchFields()
, aby pobrać pola danych Informacje o miejscu
potrzebnych w danej aplikacji.
Z następnego przykładu odbiornik wysyła żądanie informacji o miejscu i wyświetla je na mapie.
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; });
Pobierz wyniki geokodowania dla wybranego miejsca
Aby uzyskać wyniki geokodowania dla wybranego miejsca, użyj funkcji google.maps.Geocoder
, aby uzyskać
jak w tym fragmencie kodu:
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, }); });
Przykładowe mapy
Ta sekcja zawiera pełny kod do przykładowych map przedstawionych na tej stronie.
Element autouzupełniania
Ten przykład dodaje do strony internetowej widżet autouzupełniania i wyświetla wyniki dla każdej wybrane miejsce.
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>
Zobacz próbkę
Autouzupełnianie mapy
Ten przykład pokazuje, jak dodać widżet autouzupełniania do mapy 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>
Zobacz próbkę
Użycie komponentu Selektor miejsc
Uwaga: ten przykład korzysta z biblioteki typu open source. Zobacz README w celu uzyskania pomocy i przekazują opinie związane z biblioteką.
Komponent selektora miejsc to pole tekstowe, które umożliwia użytkownikom wyszukiwanie konkretnego adresu lub miejsca za pomocą autouzupełniania. Jest częścią rozszerzonej biblioteki komponentów, czyli zestaw komponentów internetowych, które pomagają programistom szybciej tworzyć lepsze mapy i funkcje lokalizacji.
Konfigurator selektora miejsc
Użyj konfiguratora, aby utworzyć kod możliwy do umieszczenia na potrzeby niestandardowego komponentu selektora miejsc, a następnie go wyeksportuj. używać jej z popularnymi platformami, takimi jak React czy Angular, lub w ogóle jej nie używać.
Rozpocznij
Zacznij od wczytania biblioteki komponentów rozszerzonych przy użyciu npm.
Aby uzyskać najlepszą wydajność, użyj menedżera pakietów i zaimportuj tylko potrzebne komponenty. Ten pakiet jest wymieniony w npm jako @googlemaps/extended-component-library. Zainstaluj ją za pomocą:
npm i @googlemaps/extended-component-library;
Następnie zaimportuj wszystkie komponenty, których używasz w aplikacji.
import '@googlemaps/extended-component-library/place_picker.js';
Po wczytaniu biblioteki npm pobierz klucz interfejsu API z konsoli Cloud.
<gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>
Użyj tagu komponentu selektora miejsc.
<gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%"> </gmpx-place-picker>
Więcej informacji znajdziesz tutaj: GitHub lub npm. Aby zobaczyć komponenty użyte w przykładowym kodzie, zapoznaj się z examples w GitHubie.