Autouzupełnianie miejsc
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)
Uwaga: biblioteki po stronie serwera
Ta strona zawiera opis biblioteki po stronie klienta dostępnej w interfejsie Maps JavaScript API. Jeśli chcesz korzystać z usługi internetowej Places API na serwerze, zapoznaj się z klientem Node.js do usług Google Maps. Na stronie, do której prowadzi ten link, znajdziesz też informacje o klientach Java, Python i Go do usług Google Maps.
Wprowadzenie
Autouzupełnianie to funkcja biblioteki Miejsc w interfejsie Maps JavaScript API. Autouzupełnianie umożliwia nadanie aplikacjom funkcji wyszukiwania z wyprzedzeniem, która jest dostępna w polu wyszukiwania Map Google.
Usługa autouzupełniania może dopasowywać całe słowa i podciągi znaków, rozwiązując nazwy miejsc, adresy i kody Plus Code. Dzięki temu aplikacje mogą wysyłać zapytania w trakcie wpisywania przez użytkownika, aby na bieżąco podawać prognozy dotyczące miejsc. Zgodnie z definicją interfejsu Places API „miejsce” może być obiektem, położeniem geograficznym lub ważnym punktem orientacyjnym.
Pierwsze kroki
Zanim zaczniesz korzystać z biblioteki Places w interfejsie Maps JavaScript API, sprawdź, czy interfejs Places API jest włączony w konsoli Google Cloud w tym samym projekcie, w którym skonfigurowano interfejs Maps JavaScript API.
Kliknij przycisk Wybierz projekt, a następnie wybierz ten sam projekt, który został skonfigurowany na potrzeby interfejsu Maps JavaScript API, i kliknij Otwórz.
Na liście interfejsów API w panelu znajdź Places API.
Jeśli widzisz interfejs API na liście, wszystko jest w porządku. Ten projekt ma jednak stan starszej wersji. Więcej informacji o etapie starszej wersji i o tym, jak przejść ze starszej wersji na nowsze usługi, znajdziesz w artykule Starsze produkty i funkcje. Wyjątkiem są widżety Autouzupełnianie i SearchBox, które nie są jeszcze dostępne jako usługa GA w interfejsie Places API (nowym).
Wczytaj bibliotekę
Usługa Places to samodzielna biblioteka, która jest oddzielona od głównego kodu interfejsu Maps JavaScript API. Aby korzystać z funkcji zawartych w tej bibliotece, musisz najpierw ją wczytać za pomocą parametru libraries w adresie URL bootstrap interfejsu Maps API:
Interfejs API oferuje 2 typy widżetów autouzupełniania, które możesz dodać za pomocą klas Autocomplete i SearchBox.
Możesz też użyć klasy AutocompleteService, aby programowo pobierać wyniki autouzupełniania (patrz dokumentacja interfejsu Maps JavaScript API: klasa AutocompleteService).
Poniżej znajdziesz podsumowanie dostępnych klas:
Autocomplete dodaje do strony internetowej pole do wprowadzania danych i monitoruje je pod kątem wpisywanych znaków. Gdy użytkownik wpisuje tekst, autouzupełnianie zwraca prognozy miejsc w postaci listy rozwijanej. Gdy użytkownik wybierze miejsce z listy, informacje o nim zostaną zwrócone do obiektu autouzupełniania i będą dostępne dla Twojej aplikacji. Szczegóły znajdziesz poniżej.
Ilustracja 1. Pole tekstowe autouzupełniania i lista wyboruIlustracja 2. Wypełniony formularz adresowy
SearchBox dodaje do strony internetowej pole do wprowadzania danych w podobny sposób jak element Autocomplete. Różnice są następujące:
Główna różnica polega na wynikach wyświetlanych na liście wyboru. SearchBox zawiera rozszerzoną listę prognoz, która może obejmować miejsca (zgodnie z definicją w interfejsie Places API) oraz sugerowane wyszukiwane hasła. Jeśli na przykład użytkownik wpisze „pizza w nowym”, lista wyboru może zawierać frazę „pizza w Nowym Jorku” oraz nazwy różnych pizzerii.
SearchBox oferuje mniej opcji ograniczania wyszukiwania niż Autocomplete. W pierwszym przypadku możesz ukierunkować wyszukiwanie na dany LatLngBounds. W drugim przypadku możesz ograniczyć wyszukiwanie do konkretnego kraju i określonych typów miejsc, a także ustawić granice. Więcej informacji znajdziesz poniżej.
Ilustracja 3. Pole wyszukiwania z wyszukiwanymi hasłami i podpowiedziami dotyczącymi miejsc.
Szczegółowe informacje znajdziesz poniżej.
Możesz utworzyć obiekt AutocompleteService, aby programowo pobierać prognozy. Wywołaj funkcję getPlacePredictions(), aby pobrać pasujące miejsca, lub wywołaj funkcję getQueryPredictions(), aby pobrać pasujące miejsca oraz sugerowane wyszukiwane hasła.
Uwaga: AutocompleteService nie dodaje żadnych elementów interfejsu.
Zamiast tego powyższe metody zwracają tablicę obiektów prognozy. Każdy obiekt prognozy zawiera tekst prognozy, a także informacje referencyjne i szczegóły dotyczące tego, jak wynik pasuje do danych wejściowych użytkownika. Szczegółowe informacje znajdziesz poniżej.
Dodawanie widżetu autouzupełniania
Widżet Autocomplete tworzy na stronie internetowej pole wprowadzania tekstu, wyświetla prognozy miejsc na liście wyboru interfejsu i zwraca szczegóły miejsca w odpowiedzi na żądanie getPlace(). Każdy wpis na liście wyboru odpowiada jednemu miejscu (zgodnie z definicją w interfejsie Places API).
Konstruktor Autocomplete przyjmuje 2 argumenty:
Element HTML input typu text. Jest to pole do wprowadzania danych, które będzie monitorowane przez usługę automatycznego uzupełniania, a wyniki będą do niego dołączane.
Opcjonalny argument AutocompleteOptions, który może zawierać te właściwości:
Tablica danych fields, które mają być uwzględnione w odpowiedzi Place Details na wybrane przez użytkownika PlaceResult. Jeśli właściwość nie jest ustawiona lub przekazano wartość ['ALL'], zwracane są wszystkie dostępne pola i naliczane są opłaty (nie jest to zalecane w przypadku wdrożeń produkcyjnych). Listę pól znajdziesz PlaceResult.
Tablica types, która określa typ lub kolekcję typów, jak podano w obsługiwanych typach. Jeśli nie podasz typu, zwracane będą wszystkie typy.
bounds to google.maps.LatLngBounds obiekt określający obszar, w którym mają być wyszukiwane miejsca. Wyniki są ukierunkowane na miejsca znajdujące się w tych granicach, ale nie są do nich ograniczone.
strictBounds to boolean, które określa, czy interfejs API ma zwracać tylko te miejsca, które znajdują się ściśle w regionie zdefiniowanym przez podany parametr bounds. Interfejs API nie zwraca wyników spoza tego regionu, nawet jeśli pasują one do danych wejściowych użytkownika.
componentRestrictions można używać do ograniczania wyników do konkretnych grup. Możesz użyć componentRestrictions, aby filtrować dane według maksymalnie 5 krajów. Kraje muszą być przekazywane jako dwuznakowy kod kraju zgodny ze standardem ISO 3166-1 Alpha-2. Wiele krajów musi być przekazywanych jako lista kodów krajów.
Uwaga: jeśli otrzymasz nieoczekiwane wyniki z kodem kraju, sprawdź, czy używasz kodu, który obejmuje kraje, terytoria zależne i obszary specjalne o znaczeniu geograficznym, które Cię interesują. Informacje o kodach znajdziesz na Wikipedii: Lista kodów krajów ISO 3166 lub na platformie ISO Online Browsing Platform.
placeIdOnly można użyć, aby poinstruować widżet Autocomplete, aby pobierał tylko identyfikatory miejsc. Po wywołaniu funkcji onCallinggetPlace() na obiekcie Autocomplete udostępniony obiekt PlaceResult będzie miał ustawione tylko właściwości place id, types i name. Zwrócony identyfikator miejsca możesz wykorzystać w wywołaniach usług Places, Geocoding, Directions lub Distance Matrix.
Ograniczanie podpowiedzi autouzupełniania
Domyślnie autouzupełnianie miejsc wyświetla wszystkie typy miejsc, z większym prawdopodobieństwem prognoz w pobliżu lokalizacji użytkownika, i pobiera wszystkie dostępne pola danych dla wybranego przez użytkownika miejsca. Ustaw opcje autouzupełniania miejsc, aby wyświetlać bardziej trafne prognozy na podstawie Twojego przypadku użycia.
Ustawianie opcji podczas tworzenia
Konstruktor Autocomplete akceptuje parametr AutocompleteOptions, który umożliwia ustawienie ograniczeń podczas tworzenia widżetu. W tym przykładzie ustawiono opcje bounds, componentRestrictions i types, aby wysyłać prośby o miejsca typu establishment, preferując te, które znajdują się w określonym obszarze geograficznym, i ograniczając prognozy do miejsc w Stanach Zjednoczonych. Ustawienie opcji fields określa, jakie informacje mają być zwracane o wybranym przez użytkownika miejscu.
Wywołaj funkcję setOptions(), aby zmienić wartość opcji w przypadku istniejącego widżetu.
TypeScript
constcenter={lat:50.064192,lng:-130.605469};// Create a bounding box with sides ~10km away from the center pointconstdefaultBounds={north:center.lat+0.1,south:center.lat-0.1,east:center.lng+0.1,west:center.lng-0.1,};constinput=document.getElementById("pac-input")asHTMLInputElement;constoptions={bounds:defaultBounds,componentRestrictions:{country:"us"},fields:["address_components","geometry","icon","name"],strictBounds:false,};constautocomplete=newgoogle.maps.places.Autocomplete(input,options);
constcenter={lat:50.064192,lng:-130.605469};// Create a bounding box with sides ~10km away from the center pointconstdefaultBounds={north:center.lat+0.1,south:center.lat-0.1,east:center.lng+0.1,west:center.lng-0.1,};constinput=document.getElementById("pac-input");constoptions={bounds:defaultBounds,componentRestrictions:{country:"us"},fields:["address_components","geometry","icon","name"],strictBounds:false,};constautocomplete=newgoogle.maps.places.Autocomplete(input,options);
Określ pola danych, aby uniknąć opłat za jednostki SKU danych o miejscach, których nie potrzebujesz. Uwzględnij właściwość fields w obiekcie AutocompleteOptions przekazywanym do konstruktora widżetu, jak pokazano w poprzednim przykładzie, lub wywołaj metodę setFields() na istniejącym obiekcie Autocomplete.
Ustaw opcję strictBounds, aby ograniczyć wyniki do bieżących granic, niezależnie od tego, czy są one oparte na widocznym obszarze mapy, czy na granicach prostokątnych.
autocomplete.setOptions({strictBounds:true});
Ograniczanie prognoz do określonego kraju
Użyj opcji componentRestrictions lub zadzwoń pod numer setComponentRestrictions(), aby ograniczyć wyszukiwanie autouzupełniania do określonego zestawu maksymalnie 5 krajów.
Użyj opcji types lub zadzwoń pod numer setTypes(), aby ograniczyć prognozy do określonych typów miejsc. To ograniczenie określa typ lub zbiór typów, jak podano w typach miejsc.
Jeśli nie określono żadnego ograniczenia, zwracane są wszystkie typy.
W przypadku wartości opcji types lub wartości przekazywanej do setTypes() możesz określić:
Gdy użytkownik wybierze miejsce z prognoz dołączonych do pola tekstowego autouzupełniania, usługa wyśle zdarzenie place_changed. Aby uzyskać szczegółowe informacje o miejscu:
Utwórz moduł obsługi zdarzeń dla zdarzenia place_changed i wywołaj addListener() na obiekcie Autocomplete, aby dodać moduł obsługi.
Wywołaj funkcję Autocomplete.getPlace() na obiekcie Autocomplete, aby pobrać obiekt PlaceResult, którego możesz następnie użyć do uzyskania dodatkowych informacji o wybranym miejscu.
Domyślnie, gdy użytkownik wybierze miejsce, autouzupełnianie zwraca wszystkie dostępne pola danych wybranego miejsca, a Ty otrzymasz odpowiednią fakturę. Użyj parametru Autocomplete.setFields(), aby określić, które pola danych miejsca mają być zwracane. Więcej informacji o obiekcie PlaceResult, w tym listę pól danych miejsca, o które możesz poprosić, znajdziesz w dokumentacji. Aby uniknąć płacenia za dane, których nie potrzebujesz, użyj parametru Autocomplete.setFields(), aby określić tylko te dane miejsca, które będziesz wykorzystywać.
Właściwość name zawiera description z podpowiedzi autouzupełniania miejsc. Więcej informacji o description znajdziesz w dokumentacji autouzupełniania miejsc.
W przypadku formularzy adresowych przydatne jest uzyskanie adresu w formacie ustrukturyzowanym. Aby zwrócić uporządkowany adres wybranego miejsca, wywołaj Autocomplete.setFields() i określ pole address_components.
W tym przykładzie użyto autouzupełniania do wypełnienia pól w formularzu adresu.
TypeScript
functionfillInAddress(){// Get the place details from the autocomplete object.constplace=autocomplete.getPlace();letaddress1="";letpostcode="";// Get each component of the address from the place details,// and then fill-in the corresponding field on the form.// place.address_components are google.maps.GeocoderAddressComponent objects// which are documented at http://goo.gle/3l5i5Mrfor(constcomponentofplace.address_componentsasgoogle.maps.GeocoderAddressComponent[]){// @ts-ignore remove once typings fixedconstcomponentType=component.types[0];switch(componentType){case"street_number":{address1=`${component.long_name}${address1}`;break;}case"route":{address1+=component.short_name;break;}case"postal_code":{postcode=`${component.long_name}${postcode}`;break;}case"postal_code_suffix":{postcode=`${postcode}-${component.long_name}`;break;}case"locality":(document.querySelector("#locality")asHTMLInputElement).value=component.long_name;break;case"administrative_area_level_1":{(document.querySelector("#state")asHTMLInputElement).value=component.short_name;break;}case"country":(document.querySelector("#country")asHTMLInputElement).value=component.long_name;break;}}address1Field.value=address1;postalField.value=postcode;// After filling the form with address components from the Autocomplete// prediction, set cursor focus on the second address line to encourage// entry of subpremise information such as apartment, unit, or floor number.address2Field.focus();}
functionfillInAddress(){// Get the place details from the autocomplete object.constplace=autocomplete.getPlace();letaddress1="";letpostcode="";// Get each component of the address from the place details,// and then fill-in the corresponding field on the form.// place.address_components are google.maps.GeocoderAddressComponent objects// which are documented at http://goo.gle/3l5i5Mrfor(constcomponentofplace.address_components){// @ts-ignore remove once typings fixedconstcomponentType=component.types[0];switch(componentType){case"street_number":{address1=`${component.long_name}${address1}`;break;}case"route":{address1+=component.short_name;break;}case"postal_code":{postcode=`${component.long_name}${postcode}`;break;}case"postal_code_suffix":{postcode=`${postcode}-${component.long_name}`;break;}case"locality":document.querySelector("#locality").value=component.long_name;break;case"administrative_area_level_1":{document.querySelector("#state").value=component.short_name;break;}case"country":document.querySelector("#country").value=component.long_name;break;}}address1Field.value=address1;postalField.value=postcode;// After filling the form with address components from the Autocomplete// prediction, set cursor focus on the second address line to encourage// entry of subpremise information such as apartment, unit, or floor number.address2Field.focus();}window.initAutocomplete=initAutocomplete;
Domyślnie pole tekstowe utworzone przez usługę autouzupełniania zawiera standardowy tekst zastępczy. Aby zmodyfikować tekst, ustaw atrybut placeholder w elemencie input:
<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">
Uwaga: domyślny tekst zastępczy jest lokalizowany automatycznie. Jeśli określisz własną wartość symbolu zastępczego, musisz zadbać o jej lokalizację w aplikacji. Informacje o tym, jak interfejs Maps JavaScript API wybiera język, znajdziesz w dokumentacji dotyczącej
lokalizacji.
SearchBox umożliwia użytkownikom wyszukiwanie geograficzne na podstawie tekstu, np. „pizza w Nowym Jorku” lub „sklepy obuwnicze w pobliżu ulicy Robson”.
Możesz dołączyć SearchBox do pola tekstowego, a gdy będziesz wpisywać tekst, usługa będzie zwracać prognozy w postaci listy rozwijanej.
SearchBox udostępnia rozszerzoną listę prognoz, która może zawierać miejsca (zgodnie z definicją w interfejsie Places API) oraz sugerowane wyszukiwane hasła. Jeśli na przykład użytkownik wpisze „pizza w nowym”, lista wyboru może zawierać wyrażenie „pizza w Nowym Jorku” oraz nazwy różnych pizzerii. Gdy użytkownik wybierze miejsce z listy, informacje o tym miejscu zostaną zwrócone do obiektu SearchBox i będą mogły zostać pobrane przez aplikację.
Konstruktor SearchBox przyjmuje 2 argumenty:
Element HTML input typu text. Jest to pole do wprowadzania danych, które będzie monitorowane przez usługę SearchBox, a do którego będą dołączane wyniki.
Argument options, który może zawierać właściwość bounds:bounds to obiekt google.maps.LatLngBounds określający obszar, w którym mają być wyszukiwane miejsca. Wyniki są bardziej prawdopodobne w przypadku miejsc znajdujących się w tych granicach, ale nie są do nich ograniczone.
Poniższy kod używa parametru bounds, aby kierować wyniki na miejsca w określonym obszarze geograficznym, podanym za pomocą współrzędnych geograficznych.
Zmienianie obszaru wyszukiwania w przypadku SearchBox
Aby zmienić obszar wyszukiwania dla istniejącego obiektu SearchBox, wywołaj funkcję setBounds() na obiekcie SearchBox i przekaż odpowiedni obiekt LatLngBounds.
Gdy użytkownik wybierze element z podpowiedzi dołączonych do pola wyszukiwania, usługa wywoła zdarzenie places_changed. Możesz wywołać funkcję getPlaces() na obiekcie SearchBox, aby pobrać tablicę zawierającą kilka podpowiedzi, z których każda jest obiektem PlaceResult.
// Listen for the event fired when the user selects a prediction and retrieve// more details for that place.searchBox.addListener("places_changed",()=>{constplaces=searchBox.getPlaces();if(places.length==0){return;}// Clear out the old markers.markers.forEach((marker)=>{marker.setMap(null);});markers=[];// For each place, get the icon, name and location.constbounds=newgoogle.maps.LatLngBounds();places.forEach((place)=>{if(!place.geometry||!place.geometry.location){console.log("Returned place contains no geometry");return;}consticon={url:place.iconasstring,size:newgoogle.maps.Size(71,71),origin:newgoogle.maps.Point(0,0),anchor:newgoogle.maps.Point(17,34),scaledSize:newgoogle.maps.Size(25,25),};// Create a marker for each place.markers.push(newgoogle.maps.Marker({map,icon,title:place.name,position:place.geometry.location,}));if(place.geometry.viewport){// Only geocodes have viewport.bounds.union(place.geometry.viewport);}else{bounds.extend(place.geometry.location);}});map.fitBounds(bounds);});
// Listen for the event fired when the user selects a prediction and retrieve// more details for that place.searchBox.addListener("places_changed",()=>{constplaces=searchBox.getPlaces();if(places.length==0){return;}// Clear out the old markers.markers.forEach((marker)=>{marker.setMap(null);});markers=[];// For each place, get the icon, name and location.constbounds=newgoogle.maps.LatLngBounds();places.forEach((place)=>{if(!place.geometry||!place.geometry.location){console.log("Returned place contains no geometry");return;}consticon={url:place.icon,size:newgoogle.maps.Size(71,71),origin:newgoogle.maps.Point(0,0),anchor:newgoogle.maps.Point(17,34),scaledSize:newgoogle.maps.Size(25,25),};// Create a marker for each place.markers.push(newgoogle.maps.Marker({map,icon,title:place.name,position:place.geometry.location,}),);if(place.geometry.viewport){// Only geocodes have viewport.bounds.union(place.geometry.viewport);}else{bounds.extend(place.geometry.location);}});map.fitBounds(bounds);});
Programowe pobieranie prognoz usługi autouzupełniania miejsc
Aby pobierać prognozy programowo, użyj klasy AutocompleteService. Klasa AutocompleteService nie dodaje żadnych elementów interfejsu. Zamiast tego zwraca tablicę obiektów prognozy, z których każdy zawiera tekst prognozy, informacje referencyjne i szczegóły dotyczące dopasowania wyniku do danych wejściowych użytkownika. Jest to przydatne, jeśli chcesz mieć większą kontrolę nad interfejsem niż w przypadku klas Autocomplete i SearchBox opisanych powyżej.
AutocompleteService udostępnia te metody:
getPlacePredictions() zwraca prognozy miejsc.
Uwaga: „miejsce” może być obiektem, lokalizacją geograficzną lub ważnym punktem orientacyjnym, zgodnie z definicją w interfejsie Places API.
getQueryPredictions() zwraca rozszerzoną listę prognoz, która może zawierać miejsca (zgodnie z definicją w interfejsie Places API) oraz sugerowane wyszukiwane hasła. Jeśli na przykład użytkownik wpisze „pizza w nowym”, lista wyboru może zawierać frazę „pizza w Nowym Jorku” oraz nazwy różnych pizzerii.
distance_meters to odległość w metrach od miejsca do określonego AutocompletionRequest.origin.
matched_substrings zawiera zestaw podciągów w opisie, które pasują do elementów wprowadzonych przez użytkownika. Jest to przydatne do wyróżniania tych podciągów w aplikacji. W wielu przypadkach zapytanie będzie wyświetlane jako podciąg w polu opisu.
length to długość podciągu.
offset to przesunięcie znaku, mierzone od początku ciągu opisu, w którym pojawia się dopasowany podciąg.
terms to tablica zawierająca elementy zapytania. W przypadku miejsca każdy element będzie zwykle stanowić część adresu.
offset to przesunięcie znaku, mierzone od początku ciągu opisu, w którym pojawia się dopasowany podciąg.
value to pasujące hasło.
W przykładzie poniżej wykonujemy żądanie prognozy zapytania dla frazy „pizza w pobliżu” i wyświetlamy wynik na liście.
TypeScript
// This example retrieves autocomplete predictions programmatically from the// autocomplete service, and displays them as an HTML list.// This example requires the Places library. Include the libraries=places// parameter when you first load the API. For example:// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">functioninitService():void{constdisplaySuggestions=function(predictions:google.maps.places.QueryAutocompletePrediction[]|null,status:google.maps.places.PlacesServiceStatus){if(status!=google.maps.places.PlacesServiceStatus.OK||!predictions){alert(status);return;}predictions.forEach((prediction)=>{constli=document.createElement("li");li.appendChild(document.createTextNode(prediction.description));(document.getElementById("results")asHTMLUListElement).appendChild(li);});};constservice=newgoogle.maps.places.AutocompleteService();service.getQueryPredictions({input:"pizza near Syd"},displaySuggestions);}declareglobal{interfaceWindow{initService:()=>void;}}window.initService=initService;
// This example retrieves autocomplete predictions programmatically from the// autocomplete service, and displays them as an HTML list.// This example requires the Places library. Include the libraries=places// parameter when you first load the API. For example:// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">functioninitService(){constdisplaySuggestions=function(predictions,status){if(status!=google.maps.places.PlacesServiceStatus.OK||!predictions){alert(status);return;}predictions.forEach((prediction)=>{constli=document.createElement("li");li.appendChild(document.createTextNode(prediction.description));document.getElementById("results").appendChild(li);});};constservice=newgoogle.maps.places.AutocompleteService();service.getQueryPredictions({input:"pizza near Syd"},displaySuggestions);}window.initService=initService;
<html>
<head>
<title>Retrieving Autocomplete Predictions</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<p>Query suggestions for 'pizza near Syd':</p>
<ul id="results"></ul>
<!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
<img
class="powered-by-google"
src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
alt="Powered by Google"
/>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
defer
></script>
</body>
</html>
AutocompleteService.getPlacePredictions()
może używać tokenów sesji (jeśli zostały wdrożone) do grupowania żądań autouzupełniania na potrzeby rozliczeń. Tokeny sesji grupują fazy zapytania i wyboru w wyszukiwaniu autouzupełniania użytkownika w osobną sesję na potrzeby rozliczeń. Sesja rozpoczyna się, gdy użytkownik zaczyna wpisywać zapytanie, a kończy, gdy wybierze miejsce. Każda sesja może zawierać wiele zapytań, po których następuje wybór jednego miejsca. Po zakończeniu sesji token traci ważność. Aplikacja musi generować nowy token dla każdej sesji. Zalecamy używanie tokenów sesji we wszystkich sesjach autouzupełniania. Jeśli parametr sessionToken zostanie pominięty lub jeśli ponownie użyjesz tokena sesji, sesja zostanie obciążona tak, jakby nie podano tokena sesji (każde żądanie jest rozliczane osobno).
Możesz użyć tego samego tokena sesji, aby wysłać pojedyncze żądanie informacje o miejscu dotyczące miejsca, które jest wynikiem wywołania funkcji AutocompleteService.getPlacePredictions().
W takim przypadku żądanie autouzupełniania jest łączone z żądaniem informacji o miejscu, a wywołanie jest rozliczane jako zwykłe żądanie informacji o miejscu. Za żądanie autouzupełniania nie są pobierane żadne opłaty.
Pamiętaj, aby w przypadku każdej nowej sesji przekazywać unikalny token sesji. Użycie tego samego tokena w więcej niż 1 sesji autouzupełniania spowoduje unieważnienie tych sesji, a wszystkie żądania autouzupełniania w unieważnionych sesjach będą rozliczane osobno przy użyciu jednostki SKU Autouzupełnianie – za żądanie. Więcej informacji o tokenach sesji
W przykładzie poniżej pokazujemy, jak utworzyć token sesji, a następnie przekazać go w AutocompleteService (funkcja displaySuggestions() została pominięta dla zwięzłości):
// Create a new session token.varsessionToken=newgoogle.maps.places.AutocompleteSessionToken();// Pass the token to the autocomplete service.varautocompleteService=newgoogle.maps.places.AutocompleteService();autocompleteService.getPlacePredictions({input:'pizza near Syd',sessionToken:sessionToken},displaySuggestions);
Pamiętaj, aby w przypadku każdej nowej sesji przekazywać unikalny token sesji. Używanie tego samego tokena w więcej niż 1 sesji spowoduje naliczenie opłaty za każde żądanie osobno.
Domyślnie elementy interfejsu udostępniane przez tagi Autocomplete i SearchBox są stylizowane tak, aby można było je umieścić na mapie Google. Możesz dostosować stylizację do swojej witryny. Dostępne są te klasy CSS. Wszystkie klasy wymienione poniżej mają zastosowanie zarówno do widżetów Autocomplete, jak i SearchBox.
Klasy CSS dla widżetów Autouzupełnianie i SearchBox
Klasa CSS
Opis
pac-container
Element wizualny zawierający listę prognoz zwróconych przez usługę autouzupełniania miejsc. Ta lista pojawia się jako lista rozwijana pod widżetem Autocomplete lub SearchBox.
pac-icon
Ikona wyświetlana po lewej stronie każdego elementu na liście prognoz.
pac-item
Element na liście prognoz dostarczanej przez widżet Autocomplete lub SearchBox.
pac-item:hover
Element, na który użytkownik najeżdża wskaźnikiem myszy.
pac-item-selected
Element, gdy użytkownik wybierze go za pomocą klawiatury. Uwaga: wybrane elementy będą należeć do tych zajęć i zajęć pac-item.
pac-item-query
Zakres w pac-item, który jest główną częścią prognozy. W przypadku lokalizacji geograficznych zawiera nazwę miejsca, np. „Sydney”, lub nazwę ulicy i numer, np. „10 King Street”. W przypadku wyszukiwań tekstowych, takich jak „pizza w Nowym Jorku”, zawiera pełny tekst zapytania. Domyślnie element pac-item-query jest czarny. Jeśli w pac-item znajduje się dodatkowy tekst, jest on poza pac-item-query i dziedziczy styl z pac-item. Domyślnie jest szary. Dodatkowy tekst to zwykle adres.
pac-matched
Część zwróconej prognozy, która pasuje do danych wprowadzonych przez użytkownika. Domyślnie pasujący tekst jest wyróżniony pogrubieniem tekstu. Pamiętaj, że dopasowany tekst może znajdować się w dowolnym miejscu w obrębie pac-item. Nie musi być częścią pac-item-query i może częściowo znajdować się w pac-item-query, a częściowo w pozostałym tekście w pac-item.
Optymalizacja Autouzupełniania miejsc (starsza wersja)
W tej sekcji opisujemy sprawdzone metody, które pomogą Ci w pełni wykorzystać możliwości usługi autouzupełniania miejsc (starsza wersja).
Poznaj najważniejsze pola danych Autouzupełniania miejsc (starsza wersja) od samego początku.
Pola dotyczące preferowania lokalizacji i ograniczania lokalizacji są opcjonalne, ale mogą mieć znaczący wpływ na skuteczność autouzupełniania.
Używaj obsługi błędów, aby zapewnić prawidłowe działanie aplikacji, gdy interfejs API zwróci błąd.
Upewnij się, że aplikacja obsługuje sytuacje, w których użytkownik nie dokonał wyboru, i zapewnia mu możliwość kontynuowania.
Sprawdzone metody optymalizacji kosztów
Podstawowa optymalizacja kosztów
Aby zoptymalizować koszt korzystania z usługi autouzupełniania miejsc (starszej wersji), używaj masek pól w widżetach informacji o miejscu (starszej wersji) i autouzupełniania miejsc (starszej wersji), aby zwracać tylko potrzebne pola danych autouzupełniania miejsc (starszej wersji).
Zaawansowana optymalizacja kosztów
Rozważ wdrożenie automatyzacji funkcji Autouzupełniania miejsc (starszej wersji), aby uzyskać dostęp do SKU: Autocomplete – cena za żądanie i wysyłać żądania wyników interfejsu Geocoding API dotyczące wybranego miejsca zamiast informacji o miejscu (starszej wersji). Cena za żądanie w połączeniu z interfejsem Geocoding API jest bardziej opłacalna niż cena za sesję (oparta na sesji), jeśli spełnione są oba te warunki:
Jeśli potrzebujesz tylko szerokości i długości geograficznej lub adresu wybranego miejsca, interfejs Geocoding API dostarczy te informacje za niższą cenę niż wywołanie interfejsu Place Details (starszego).
Jeśli użytkownicy wybiorą podpowiedź autouzupełniania w ramach średnio 4 lub mniej żądań Autouzupełniania miejsc (starsza wersja), cena za żądanie może być bardziej opłacalna niż cena za sesję.
Aby uzyskać pomoc w wyborze implementacji Autouzupełniania miejsc (starszej wersji), która odpowiada Twoim potrzebom, wybierz kartę odpowiadającą Twojej odpowiedzi na to pytanie.
Czy Twoja aplikacja wymaga innych informacji niż adres i szerokość/długość geograficzna wybranej prognozy?
Poniższe wytyczne opisują sposoby optymalizacji skuteczności autouzupełniania miejsc (starsza wersja):
Dodaj do implementacji funkcji Autouzupełnianie miejsc (starszej wersji) ograniczenia związane z krajem, ustawienia lokalizacji i (w przypadku implementacji programowych) preferencje językowe. Preferencje językowe nie są potrzebne w przypadku widżetów, ponieważ pobierają one preferencje językowe z przeglądarki lub urządzenia mobilnego użytkownika.
Jeśli usługa autouzupełniania miejsc (starsza wersja) jest używana z mapą, możesz określić lokalizację na podstawie widocznego obszaru mapy.
W sytuacjach, gdy użytkownik nie wybierze żadnej z podpowiedzi autouzupełniania miejsc (starsza wersja), zwykle dlatego, że żadna z nich nie jest adresem, którego szuka, możesz ponownie użyć pierwotnych danych wejściowych użytkownika, aby uzyskać trafniejsze wyniki:
Jeśli oczekujesz, że użytkownik poda tylko informacje o adresie, użyj ponownie pierwotnych danych wejściowych użytkownika w wywołaniu interfejsu Geocoding API.
Jeśli oczekujesz, że użytkownik będzie wpisywać zapytania dotyczące konkretnego miejsca według nazwy lub adresu, użyj żądania informacje o miejscu (starsza wersja). Jeśli wyniki mają być wyświetlane tylko w określonym regionie, użyj ustawień lokalizacji.
Inne scenariusze, w których warto wrócić do Geocoding API:
użytkownicy wpisujący adresy podrzędne, np. adresy konkretnych lokali lub mieszkań w budynku; Na przykład czeski adres „Stroupežnického 3191/17, Praha”
daje częściową podpowiedź w usłudze Autouzupełnianie miejsc (starsza wersja).
Użytkownicy wpisujący adresy z prefiksami odcinków dróg, np. „23–30 29th St, Queens” w Nowym Jorku lub „47–380 Kamehameha Hwy, Kaneohe” na wyspie Kauai na Hawajach.
Preferowanie lokalizacji
Aby zawęzić wyniki do określonego obszaru, przekaż parametr location i parametr radius. Ta wartość informuje usługę Autouzupełnianie miejsc (starsza wersja), że ma preferować wyświetlanie wyników w określonym obszarze. Wyniki spoza zdefiniowanego obszaru mogą być nadal wyświetlane. Możesz użyć parametru includedRegionCodes, aby filtrować wyniki i wyświetlać tylko miejsca w określonym kraju.
Ograniczanie lokalizacji
Ogranicz wyniki do określonego obszaru, przekazując parametr locationRestriction.
Możesz też ograniczyć wyniki do regionu zdefiniowanego przez parametr location i radius, dodając parametr strictbounds. To polecenie powoduje, że Autouzupełnianie miejsc (starsza wersja) zwraca tylko wyniki z tego regionu.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2026-06-15 UTC."],[],[]]
