PlaceAutocompleteElement class
google.maps.places.PlaceAutocompleteElement
class
Klasa PlaceAutocompleteElement jest podklasą HTMLElement
, która udostępnia komponent UI dla interfejsu Places Autocomplete API.
Element niestandardowy:
<gmp-place-autocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-place-autocomplete>
Te zajęcia trwają HTMLElement
.
Ta klasa implementuje PlaceAutocompleteElementOptions
.
Dostęp przez połączenie telefoniczne const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
. Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) Parametry:
|
Właściwości | |
---|---|
componentRestrictions |
Typ:
ComponentRestrictions optional Ograniczenia komponentu. Ograniczenia komponentów służą do ograniczania prognoz do tych, które znajdują się w komponencie nadrzędnym. Na przykład kraj. |
locationBias |
Typ:
LocationBias optional Miękka granica lub wskazówka do wykorzystania podczas wyszukiwania miejsc. |
locationRestriction |
Typ:
LocationRestriction optional ogranicza wyniki wyszukiwania; |
name |
Typ:
string optional Nazwa, która ma być używana dla elementu wejściowego. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name. Obowiązują te same zasady co w przypadku atrybutu name (nazwa) w przypadku danych wejściowych. Pamiętaj, że to właśnie ta nazwa będzie używana podczas przesyłania formularza. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
Atrybut HTML:
|
requestedLanguage |
Typ:
string optional Identyfikator języka, w którym mają być zwracane wyniki (jeśli to możliwe). Wyniki w wybranym języku mogą być lepiej oceniane, ale sugestie nie są ograniczone do tego języka. Zobacz listę obsługiwanych języków.
Atrybut HTML:
|
requestedRegion |
Typ:
string optional Kod regionu używany do formatowania wyników i ich filtrowania. Nie ogranicza sugestii do tego kraju. Kod regionu może mieć 2-znakową wartość domeny krajowej najwyższego poziomu. Większość kodów ccTLD jest identyczna z kodami ISO 3166-1, z kilkoma wyjątkami. Na przykład ccTLD Wielkiej Brytanii to „uk” (
.co.uk ), a jej kod ISO 3166-1 to „gb” (technicznie dla podmiotu „Zjednoczone Królestwo Wielkiej Brytanii i Irlandii Północnej”).Atrybut HTML:
|
types |
Typ:
Array<string> optional Typy prognoz, które mają być zwracane. Informacje o obsługiwanych typach znajdziesz w przewodniku dla programistów. Jeśli nie podasz żadnych typów, zwrócone zostaną wszystkie typy.
Atrybut HTML:
|
Części | |
---|---|
prediction-item |
Element w menu prognoz, który reprezentuje pojedynczą prognozę. |
prediction-item-icon |
Ikona wyświetlana po lewej stronie każdego elementu na liście prognoz. |
prediction-item-main-text |
Część elementu prognozy, która jest głównym tekstem prognozy. W przypadku lokalizacji geograficznej zawiera nazwę miejsca, np. „Sydney”, lub nazwę i numer ulicy, np. „10 ul. Królowej”. Domyślnie tekst główny elementu prognozy jest czarny. Jeśli w elemencie prediction-item znajduje się dodatkowy tekst, jest on umieszczony poza elementem prediction-item-main-text i dziedziczy styl od elementu prediction-item. Domyślnie jest ono zabarwione na szaro. Dodatkowy tekst to zwykle adres. |
prediction-item-match |
Część zwróconej prognozy, która pasuje do danych wejściowych użytkownika. Domyślnie dopasowany tekst jest wyróżniony pogrubieniem. Pamiętaj, że dopasowany tekst może znajdować się w dowolnym miejscu elementu prognozy. Nie musi być częścią prediction-item-main-text. |
prediction-item-selected |
Element, do którego użytkownik przechodzi za pomocą klawiatury. Uwaga: wybrane elementy będą podlegać działaniu zarówno tych stylów części, jak i stylów części elementów prognozy. |
prediction-list |
Element wizualny zawierający listę prognoz zwróconych przez usługę autouzupełniania miejsc. Ta lista pojawia się jako lista rozwijana pod elementem PlaceAutocompleteElement. |
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Wartość zwracana:
void Konfiguruje funkcję, która będzie wywoływana, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Wartość zwracana:
void Usuwa z docelowego elementu detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Patrz removeEventListener |
Wydarzenia | |
---|---|
gmp-placeselect |
function(placeAutocompletePlaceSelectEvent) Argumenty:
To zdarzenie jest wywoływane, gdy użytkownik wybierze prognozę miejsca. Zawiera obiekt Miejsce. |
gmp-requesterror |
function(placeAutocompleteRequestErrorEvent) Argumenty:
To zdarzenie jest wywoływane, gdy żądanie wysłane do backendu zostało odrzucone (np. z powodu nieprawidłowego klucza interfejsu API). To zdarzenie nie jest przekazywane dalej. |
PlaceAutocompleteElementOptions interfejs
google.maps.places.PlaceAutocompleteElementOptions
interfejs
Opcje tworzenia elementu PlaceAutocompleteElement.
Właściwości | |
---|---|
componentRestrictions optional |
Typ:
ComponentRestrictions optional |
locationBias optional |
Typ:
LocationBias optional |
locationRestriction optional |
Typ:
LocationRestriction optional |
requestedLanguage optional |
Typ:
string optional |
requestedRegion optional |
Typ:
string optional |
types optional |
Typ:
Array<string> optional Zobacz: PlaceAutocompleteElement.types |
PlaceAutocompletePlaceSelectEvent class
google.maps.places.PlaceAutocompletePlaceSelectEvent
class
To zdarzenie jest tworzone po wybraniu przez użytkownika miejsca za pomocą elementu autouzupełniania miejsc. Aby otworzyć zaznaczenie, kliknij event.place
.
Te zajęcia trwają Event
.
Dostęp przez połączenie telefoniczne const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
. Zobacz Biblioteki w Maps JavaScript API.
Właściwości | |
---|---|
place |
Typ:
Place |
PlaceAutocompleteRequestErrorEvent class
google.maps.places.PlaceAutocompleteRequestErrorEvent
class
To zdarzenie jest emitowane przez element PlaceAutocompleteElement, gdy wystąpi problem z żądaniem sieci.
Te zajęcia trwają Event
.
Dostęp przez połączenie telefoniczne const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
. Zobacz Biblioteki w Maps JavaScript API.
PlaceDetailsElement class
google.maps.places.PlaceDetailsElement
class
Element HTML wyświetlający szczegóły miejsca. Aby określić renderowane treści, użyj metody configureFromPlace()
lub configureFromLocation()
. Aby używać elementu Szczegóły miejsca, włącz w konsoli Google Cloud interfejs Places UI Kit API w swoim projekcie.
Element niestandardowy:
<gmp-place-details size="small"></gmp-place-details>
Te zajęcia trwają HTMLElement
.
Ta klasa implementuje PlaceDetailsElementOptions
.
Dostęp przez połączenie telefoniczne const {PlaceDetailsElement} = await google.maps.importLibrary("places")
. Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceDetailsElement |
PlaceDetailsElement([options]) Parametry:
|
Właściwości | |
---|---|
place |
Typ:
Place optional Tylko do odczytu. Obiekt Place zawierający identyfikator, lokalizację i obszar wyświetlania bieżąco renderowanego miejsca. |
size |
Typ:
PlaceDetailsSize optional Rozmiar wariantu elementu PlaceDetailsElement. Domyślnie element wyświetla się jako
PlaceDetailsSize.X_LARGE .Atrybut HTML:
|
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Wartość zwracana:
void Konfiguruje funkcję, która będzie wywoływana, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener |
configureFromLocation |
configureFromLocation(location) Parametry:
Wartość zwracana:
Promise<void> obietnica, która jest realizowana po załadowaniu i wyświetleniu danych miejsca.Konfiguruje widżet na podstawie LatLng , używając odwrotnego geokodowania. |
configureFromPlace |
configureFromPlace(place) Parametry:
Wartość zwracana:
Promise<void> obietnica, która jest realizowana po załadowaniu i wyświetleniu danych miejsca.Konfiguruje widżet na podstawie obiektu Place lub identyfikatora miejsca. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Wartość zwracana:
void Usuwa z docelowego elementu detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Patrz removeEventListener |
Wydarzenia | |
---|---|
gmp-load |
function(event) Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoje zawartość. To zdarzenie nie jest przekazywane dalej. |
gmp-requesterror |
function(event) Argumenty:
To zdarzenie jest wywoływane, gdy żądanie wysłane do backendu zostało odrzucone (np. z powodu nieprawidłowego klucza interfejsu API). To zdarzenie nie jest przekazywane dalej. |
Interfejs PlaceDetailsElementOptions
google.maps.places.PlaceDetailsElementOptions
interfejs
Opcje dotyczące usługi PlaceDetailsElement
.
Właściwości | |
---|---|
size optional |
Typ:
PlaceDetailsSize optional Zobacz: PlaceDetailsElement.size |
PlaceDetailsSize stałe
google.maps.places.PlaceDetailsSize
stałe
Wersje produktu PlaceDetailsElement
o różnych rozmiarach.
Dostęp przez połączenie telefoniczne const {PlaceDetailsSize} = await google.maps.importLibrary("places")
. Zobacz Biblioteki w Maps JavaScript API.
Stałe | |
---|---|
LARGE |
Duży wariant obejmujący duży obraz, podstawowe informacje i dane kontaktowe. |
MEDIUM |
Wersja średnia zawierająca duży obraz i podstawowe informacje. |
SMALL |
Mały wariant z małym obrazem i podstawowymi informacjami. |
X_LARGE |
Wersja ekstraduża zawierająca kolaż zdjęć, opinie i szczegółowe informacje o miejscu. |
Klasa PlaceListElement
google.maps.places.PlaceListElement
class
Element HTML wyświetlający wyniki wyszukiwania miejsca w postaci listy. Aby określić żądanie, dla którego mają być renderowane wyniki, użyj metody configureFromSearchByTextRequest()
lub configureFromSearchNearbyRequest()
. Aby używać elementu listy miejsc, włącz w konsoli Google Cloud interfejs Places UI Kit API w swoim projekcie.
Element niestandardowy:
<gmp-place-list selectable></gmp-place-list>
Te zajęcia trwają HTMLElement
.
Ta klasa implementuje PlaceListElementOptions
.
Dostęp przez połączenie telefoniczne const {PlaceListElement} = await google.maps.importLibrary("places")
. Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceListElement |
PlaceListElement([options]) Parametry:
|
Właściwości | |
---|---|
places |
Tylko do odczytu. Tablica obiektów Place zawierających identyfikatory, lokalizacje i widoki aktualnie renderowanych miejsc. |
selectable |
Typ:
boolean Czy elementy listy są możliwe do wybrania. Jeśli ma wartość Prawda, elementy listy będą przyciskami, które po kliknięciu wywołują zdarzenie
gmp-placeselect . Obsługiwana jest też nawigacja i wybieranie za pomocą klawiatury.Atrybut HTML:
|
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Wartość zwracana:
void Konfiguruje funkcję, która będzie wywoływana, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request) Parametry:
Wartość zwracana:
Promise<void> obietnica, która jest realizowana po załadowaniu i wyświetleniu danych miejsca.Konfiguruje widżet do renderowania wyników wyszukiwania z żądania do interfejsu Places Text Search API. |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request) Parametry:
Wartość zwracana:
Promise<void> obietnica, która jest realizowana po załadowaniu i wyświetleniu danych miejsca.Konfiguruje widżet, aby renderować wyniki wyszukiwania z żądania interfejsu Places Nearby Search API. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Wartość zwracana:
void Usuwa z docelowego elementu detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Patrz removeEventListener |
Wydarzenia | |
---|---|
gmp-load |
function(event) Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoje zawartość. To zdarzenie nie jest przekazywane dalej. |
gmp-placeselect |
function(event) Argumenty:
To zdarzenie jest wywoływane, gdy użytkownik wybierze miejsce. Zawiera obiekt Place i indeks wybranego miejsca na liście. |
gmp-requesterror |
function(event) Argumenty:
To zdarzenie jest wywoływane, gdy żądanie wysłane do backendu zostało odrzucone (np. z powodu nieprawidłowego klucza interfejsu API). To zdarzenie nie jest przekazywane dalej. |
Interfejs PlaceListElementOptions
google.maps.places.PlaceListElementOptions
interfejs
Opcje dotyczące usługi PlaceListElement
.
Właściwości | |
---|---|
selectable optional |
Typ:
boolean optional Zobacz: PlaceListElement.selectable |
PlaceListPlaceSelectEvent class
google.maps.places.PlaceListPlaceSelectEvent
class
To zdarzenie jest emitowane przez PlaceListElement
, gdy użytkownik wybierze miejsce.
Te zajęcia trwają Event
.
Dostęp przez połączenie telefoniczne const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
. Zobacz Biblioteki w Maps JavaScript API.
Właściwości | |
---|---|
index |
Typ:
number Indeks listy wybranego miejsca. |
place |
Typ:
Place Obiekt Place zawierający identyfikator, lokalizację i obszar wyświetlania wybranego miejsca. |
Autouzupełnianie class
google.maps.places.Autocomplete
class
Widget wyświetlający prognozy dotyczące Miejsc na podstawie tekstu wpisanego przez użytkownika. Jest ono dołączane do elementu wejściowego typu text
i nasłuchuje wpisów tekstowych w tym polu. Lista prognoz jest wyświetlana jako lista rozwijana i aktualizuje się wraz z wpisywaniem tekstu.
Te zajęcia trwają MVCObject
.
Dostęp przez połączenie telefoniczne const {Autocomplete} = await google.maps.importLibrary("places")
. Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) Parametry:
Tworzy nowy egzemplarz funkcji Autocomplete , który jest dołączany do określonego pola tekstowego z podawanymi opcjami. |
Metody | |
---|---|
getBounds |
getBounds() Parametry: brak
Zwracana wartość:
LatLngBounds|undefined granice przesunięcia.Zwraca przedział, w którym prognozy są stronnicze. |
getFields |
getFields() Parametry: brak
Wartość zwracana:
Array<string>|undefined Zwraca pola, które mają być uwzględnione w miejscu w odpowiedzi z danymi, gdy udało się pobrać dane. Listę pól znajdziesz na stronie PlaceResult . |
getPlace |
getPlace() Parametry: brak
Wartość zwracana:
PlaceResult miejsce wybrane przez użytkownika.Zwraca szczegóły wybranego przez użytkownika miejsca, jeśli udało się je pobrać. W przeciwnym razie zwraca obiekt typu Place z właściwością name ustawioną na bieżącą wartość pola wejściowego. |
setBounds |
setBounds(bounds) Parametry:
Zwracana wartość: brak
Określa preferowany obszar, w którym mają być zwracane wyniki dotyczące miejsc. Wyniki są ukierunkowane na ten obszar, ale nie są do niego ograniczone. |
setComponentRestrictions |
setComponentRestrictions(restrictions) Parametry:
Zwracana wartość: brak
Ustawia ograniczenia komponentu. Ograniczenia komponentów służą do ograniczania prognoz do tych, które znajdują się w komponencie nadrzędnym. Na przykład kraj. |
setFields |
setFields(fields) Parametry:
Zwracana wartość: brak
Określa pola, które mają być uwzględnione w miejscu w odpowiedzi z danymi, gdy zostaną one pobrane. Listę pól znajdziesz na stronie PlaceResult . |
setOptions |
setOptions(options) Parametry:
Zwracana wartość: brak
|
setTypes |
setTypes(types) Parametry:
Zwracana wartość: brak
Określa typy prognoz, które mają być zwracane. Informacje o obsługiwanych typach znajdziesz w przewodniku dla programistów. Jeśli nie podasz żadnych typów, zwrócone zostaną wszystkie typy. |
Uzyskane:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Wydarzenia | |
---|---|
place_changed |
function() Argumenty: brak.
To zdarzenie jest wywoływane, gdy PlaceResult staje się dostępne w przypadku wybranego przez użytkownika miejsca. Jeśli użytkownik wpisze nazwę Miejsca, która nie została zasugerowana przez kontroler, i naciśnie klawisz Enter lub jeśli zapytanie o szczegóły Miejsca zakończy się niepowodzeniem, PlaceResult zawiera dane wejściowe użytkownika w usłudze name bez zdefiniowania innych właściwości. |
Interfejs AutocompleteOptions
google.maps.places.AutocompleteOptions
interfejs
Opcje, które można ustawić dla obiektu Autocomplete
.
Właściwości | |
---|---|
bounds optional |
Typ:
LatLngBounds|LatLngBoundsLiteral optional Obszar, w którym ma być przeprowadzane wyszukiwanie miejsc. |
componentRestrictions optional |
Typ:
ComponentRestrictions optional Ograniczenia komponentu. Ograniczenia komponentów służą do ograniczania prognoz do tych, które znajdują się w komponencie nadrzędnym. Na przykład kraj. |
fields optional |
Typ:
Array<string> optional Pola, które mają być uwzględnione w usłudze Miejsce w odpowiedzi z danymi, gdy zostaną one pobrane (za które zostanie naliczona opłata). Jeśli podasz parametr ['ALL'] , zwrócone i obciążone zostaną wszystkie dostępne pola (nie zalecamy tego w przypadku wdrożeń produkcyjnych). Listę pól znajdziesz na stronie PlaceResult . Pola zagnieżdżone można określić za pomocą ścieżek kropkowych (np. "geometry.location" ). Domyślnie jest to ['ALL'] . |
|
Typ:
boolean optional Określa, czy mają być pobierane tylko identyfikatory miejsc. Wynik PlaceResult udostępniany po wywołaniu zdarzenia place_changed będzie zawierać tylko pola place_id, types i name, a place_id, types i description będą zwracane przez usługę Autocomplete. Domyślnie jest wyłączona. |
strictBounds optional |
Typ:
boolean optional Wartość logiczna wskazująca, że widżet autouzupełniania powinien zwracać tylko te miejsca, które znajdują się w granicach widżetu autouzupełniania w momencie wysłania zapytania. Ustawienie parametru strictBounds na false (domyślnie) spowoduje, że wyniki będą uwzględniać miejsca zawarte w granicach, ale nie będą się do nich ograniczać. |
types optional |
Typ:
Array<string> optional Typy prognoz, które mają być zwracane. Informacje o obsługiwanych typach znajdziesz w przewodniku dla programistów. Jeśli nie podasz żadnych typów, zwrócone zostaną wszystkie typy. |
SearchBox class
google.maps.places.SearchBox
class
Widget wyświetlający prognozy zapytań na podstawie tekstu wpisanego przez użytkownika. Jest ono dołączane do elementu wejściowego typu text
i nasłuchuje wpisów tekstowych w tym polu. Lista prognoz jest wyświetlana jako lista rozwijana i aktualizuje się wraz z wpisywaniem tekstu.
Te zajęcia trwają MVCObject
.
Dostęp przez połączenie telefoniczne const {SearchBox} = await google.maps.importLibrary("places")
. Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
SearchBox |
SearchBox(inputField[, opts]) Parametry:
Tworzy nowy egzemplarz funkcji SearchBox , który jest dołączany do określonego pola tekstowego z podawanymi opcjami. |
Metody | |
---|---|
getBounds |
getBounds() Parametry: brak
Wartość zwracana:
LatLngBounds|undefined Zwraca przedziały, w których prognozy zapytań są stronnicze. |
getPlaces |
getPlaces() Parametry: brak
Wartość zwracana:
Array<PlaceResult>|undefined Zwraca zapytanie wybrane przez użytkownika do użycia ze zdarzeniem places_changed . |
setBounds |
setBounds(bounds) Parametry:
Zwracana wartość: brak
Określa region, którego należy używać do ukierunkowania prognoz zapytań. Wyniki będą tylko przybliżone do tego obszaru, ale nie będą się na nim całkowicie skupiać. |
Uzyskane:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Wydarzenia | |
---|---|
places_changed |
function() Argumenty: brak.
To zdarzenie jest wywoływane, gdy użytkownik wybierze zapytanie. Aby pobrać nowe miejsca, należy użyć wartości getPlaces . |
interfejs SearchBoxOptions.
google.maps.places.SearchBoxOptions
interfejs
Opcje, które można ustawić dla obiektu SearchBox
.
Właściwości | |
---|---|
bounds optional |
Typ:
LatLngBounds|LatLngBoundsLiteral optional Obszar, w którym mają być zniekształcane prognozy zapytań. Prognozy są ukierunkowane na zapytania kierowane na te zakresy, ale nie są do nich ograniczone. |