BasicPlaceAutocompleteElement class
google.maps.places.BasicPlaceAutocompleteElement
zajęcia
BasicPlaceAutocompleteElement to klasa podrzędna HTMLElement
, która udostępnia komponent interfejsu do interfejsu Places Autocomplete API.
Element niestandardowy:
<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-basic-place-autocomplete>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs BasicPlaceAutocompleteElementOptions
.
Dostęp przez połączenie pod numer const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
BasicPlaceAutocompleteElement |
BasicPlaceAutocompleteElement(options) Parametry:
|
Właściwości | |
---|---|
includedPrimaryTypes |
Typ:
Array<string> optional Zawiera podstawowy typ miejsca (np. „restaurant” lub „gas_station”).
Miejsce jest zwracane tylko wtedy, gdy jego główny typ znajduje się na tej liście. Możesz określić maksymalnie 5 wartości. Jeśli nie określisz żadnych typów, zwracane będą wszystkie typy miejsc. Atrybut HTML:
|
includedRegionCodes |
Typ:
Array<string> optional Uwzględniaj tylko wyniki z określonych regionów, podanych jako maksymalnie 15 dwuznakowych kodów regionów CLDR. Pusty zbiór nie ograniczy wyników. Jeśli ustawisz zarówno
locationRestriction , jak i includedRegionCodes , wyniki będą znajdować się w obszarze przecięcia.Atrybut HTML:
|
locationBias |
Typ:
LocationBias optional Miękka granica lub wskazówka używana podczas wyszukiwania miejsc. |
locationRestriction |
Typ:
LocationRestriction optional Granice ograniczające wyniki wyszukiwania. |
name |
Typ:
string optional Nazwa elementu wejściowego. Szczegółowe informacje znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name. Działa tak samo jak atrybut name w przypadku danych wejściowych. Pamiętaj, że ta nazwa będzie używana po przesłaniu formularza. Szczegółowe informacje znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
Atrybut HTML:
|
origin |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Punkt początkowy, od którego ma zostać obliczona odległość. Jeśli nie określisz tu żadnej wartości, odległość nie będzie obliczana. Wysokość, jeśli jest podana, nie jest uwzględniana w obliczeniach.
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ą mieć wyższą pozycję, 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 i filtrowania wyników. Nie ogranicza to sugestii do tego kraju. Kod regionu akceptuje 2-znakową wartość ccTLD („domena najwyższego poziomu”). Większość kodów ccTLD jest identyczna z kodami ISO 3166-1, z kilkoma istotnymi wyjątkami. Na przykład krajowa domena najwyższego poziomu Zjednoczonego Królestwa to „uk” (
.co.uk ), a kod ISO 3166-1 to „gb” (technicznie dla podmiotu „Zjednoczone Królestwo Wielkiej Brytanii i Irlandii Północnej”).Atrybut HTML:
|
unitSystem |
Typ:
UnitSystem optional Układ jednostek używany do wyświetlania odległości. Jeśli nie zostanie określony, system jednostek zostanie określony przez parametr requestedRegion.
Atrybut HTML:
|
Przedziały | |
---|---|
prediction-item-icon |
Ten slot akceptuje dokładnie 1 element <template> , który będzie renderowany jako ikona wyświetlana obok elementu prognozy. |
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 geograficznych zawiera nazwę miejsca, np. „Sydney”, lub nazwę ulicy i numer, np. „10 King Street”. Domyślnie tekst prediction-item-main-text jest czarny. Jeśli w elemencie prognozy znajduje się dodatkowy tekst, jest on umieszczony poza elementem prediction-item-main-text i dziedziczy styl z elementu prediction-item. Domyślnie jest on szary. Dodatkowy tekst to zwykle adres. |
prediction-item-match |
Część zwróconej prognozy, która pasuje do danych wpisanych przez użytkownika. Domyślnie pasujący tekst jest wyróżniony pogrubieniem. Pamiętaj, że dopasowany tekst może znajdować się w dowolnym miejscu w elemencie prognozy. Nie musi być częścią elementu prediction-item-main-text. |
prediction-item-selected |
Element, gdy użytkownik przechodzi do niego za pomocą klawiatury. Uwaga: na wybrane elementy będą miały wpływ zarówno style części, jak i style części elementu 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. |
Właściwości CSS | |
---|---|
background-color |
Zastępuje kolor tła elementu. |
border |
Zastępuje obramowanie elementu. |
border-radius |
Zastępuje promień obramowania elementu. |
color-scheme |
Wskazuje, w jakim schemacie kolorów można renderować ten element. Więcej informacji znajdziesz w color-scheme dokumentacji. Domyślna wartość to color-scheme: light dark . |
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
Wydarzenia | |
---|---|
gmp-error |
function(errorEvent) Argumenty:
To zdarzenie jest uruchamiane, gdy żądanie do backendu zostało odrzucone (np. z powodu nieprawidłowego klucza interfejsu API). To zdarzenie nie jest propagowane. |
gmp-select |
function(placeSelectEvent) Argumenty:
To zdarzenie jest wywoływane, gdy użytkownik wybierze prognozę miejsca. Zawiera obiekt Place. |
BasicPlaceAutocompleteElementOptions interfejs
google.maps.places.BasicPlaceAutocompleteElementOptions
interfejs
Opcje konstruowania obiektu BasicPlaceAutocompleteElement.
Właściwości | |
---|---|
includedPrimaryTypes optional |
Typ:
Array<string> optional |
includedRegionCodes optional |
Typ:
Array<string> optional |
locationBias optional |
Typ:
LocationBias optional |
locationRestriction optional |
Typ:
LocationRestriction optional |
name optional |
Typ:
string optional |
origin optional |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Typ:
string optional |
requestedRegion optional |
Typ:
string optional |
unitSystem optional |
Typ:
UnitSystem optional |
PlaceAutocompleteElement class
google.maps.places.PlaceAutocompleteElement
zajęcia
PlaceAutocompleteElement to podklasa HTMLElement
, która udostępnia komponent interfejsu do interfejsu Places Autocomplete API.
Element PlaceAutocompleteElement automatycznie używa wewnętrznie AutocompleteSessionToken
, aby grupować fazy zapytania i wyboru w wyszukiwaniu autouzupełniania użytkownika.
Pierwsze wywołanie Place.fetchFields
na Place
zwróconym przez PlacePrediction.toPlace
będzie automatycznie zawierać token sesji użyty do pobrania PlacePrediction
.
Więcej informacji o działaniu sesji znajdziesz na stronie https://developers.google.com/maps/documentation/places/web-service/place-session-tokens.
Element niestandardowy:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceAutocompleteElementOptions
.
Dostęp przez połączenie pod numer const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) Parametry:
|
Właściwości | |
---|---|
includedPrimaryTypes |
Typ:
Array<string> optional Zawiera podstawowy typ miejsca (np. „restaurant” lub „gas_station”).
Miejsce jest zwracane tylko wtedy, gdy jego główny typ znajduje się na tej liście. Możesz określić maksymalnie 5 wartości. Jeśli nie określisz żadnych typów, zwracane będą wszystkie typy miejsc. Atrybut HTML:
|
includedRegionCodes |
Typ:
Array<string> optional Uwzględniaj tylko wyniki z określonych regionów, podanych jako maksymalnie 15 dwuznakowych kodów regionów CLDR. Pusty zbiór nie ograniczy wyników. Jeśli ustawisz zarówno
locationRestriction , jak i includedRegionCodes , wyniki będą znajdować się w obszarze przecięcia.Atrybut HTML:
|
locationBias |
Typ:
LocationBias optional Miękka granica lub wskazówka używana podczas wyszukiwania miejsc. |
locationRestriction |
Typ:
LocationRestriction optional Granice ograniczające wyniki wyszukiwania. |
name |
Typ:
string optional Nazwa elementu wejściowego. Szczegółowe informacje znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name. Działa tak samo jak atrybut name w przypadku danych wejściowych. Pamiętaj, że ta nazwa będzie używana po przesłaniu formularza. Szczegółowe informacje znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
Atrybut HTML:
|
origin |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Punkt początkowy, od którego ma zostać obliczona odległość. Jeśli nie określisz tu żadnej wartości, odległość nie będzie obliczana. Wysokość, jeśli jest podana, nie jest uwzględniana w obliczeniach.
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ą mieć wyższą pozycję, 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 i filtrowania wyników. Nie ogranicza to sugestii do tego kraju. Kod regionu akceptuje 2-znakową wartość ccTLD („domena najwyższego poziomu”). Większość kodów ccTLD jest identyczna z kodami ISO 3166-1, z kilkoma istotnymi wyjątkami. Na przykład krajowa domena najwyższego poziomu Zjednoczonego Królestwa to „uk” (
.co.uk ), a kod ISO 3166-1 to „gb” (technicznie dla podmiotu „Zjednoczone Królestwo Wielkiej Brytanii i Irlandii Północnej”).Atrybut HTML:
|
unitSystem |
Typ:
UnitSystem optional Układ jednostek używany do wyświetlania odległości. Jeśli nie zostanie określony, system jednostek zostanie określony przez parametr requestedRegion.
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 geograficznych zawiera nazwę miejsca, np. „Sydney”, lub nazwę ulicy i numer, np. „10 King Street”. Domyślnie tekst prediction-item-main-text jest czarny. Jeśli w elemencie prognozy znajduje się dodatkowy tekst, jest on umieszczony poza elementem prediction-item-main-text i dziedziczy styl z elementu prediction-item. Domyślnie jest on szary. Dodatkowy tekst to zwykle adres. |
prediction-item-match |
Część zwróconej prognozy, która pasuje do danych wpisanych przez użytkownika. Domyślnie pasujący tekst jest wyróżniony pogrubieniem. Pamiętaj, że dopasowany tekst może znajdować się w dowolnym miejscu w elemencie prognozy. Nie musi być częścią elementu prediction-item-main-text. |
prediction-item-selected |
Element, gdy użytkownik przechodzi do niego za pomocą klawiatury. Uwaga: na wybrane elementy będą miały wpływ zarówno style części, jak i style części elementu 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. |
Właściwości CSS | |
---|---|
background-color |
Zastępuje kolor tła elementu. |
border |
Zastępuje obramowanie elementu. |
border-radius |
Zastępuje promień obramowania elementu. |
color-scheme |
Wskazuje, w jakim schemacie kolorów można renderować ten element. Więcej informacji znajdziesz w color-scheme dokumentacji. Domyślna wartość to color-scheme: light dark . |
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
Wydarzenia | |
---|---|
gmp-error |
function(errorEvent) Argumenty:
To zdarzenie jest uruchamiane, gdy żądanie do backendu zostało odrzucone (np. z powodu nieprawidłowego klucza interfejsu API). To zdarzenie nie jest propagowane. |
gmp-select |
function(placePredictionSelectEvent) Argumenty:
To zdarzenie jest wywoływane, gdy użytkownik wybierze prognozę miejsca. Zawiera obiekt PlacePrediction, który można przekonwertować na obiekt Place. |
PlaceAutocompleteElementOptions interfejs
google.maps.places.PlaceAutocompleteElementOptions
interfejs
Opcje tworzenia elementu PlaceAutocompleteElement. Opis każdej właściwości znajdziesz w klasie PlaceAutocompleteElement.
Właściwości | |
---|---|
includedPrimaryTypes optional |
Typ:
Array<string> optional |
includedRegionCodes optional |
Typ:
Array<string> optional |
locationBias optional |
Typ:
LocationBias optional |
locationRestriction optional |
Typ:
LocationRestriction optional |
name optional |
Typ:
string optional |
origin optional |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Typ:
string optional |
requestedRegion optional |
Typ:
string optional |
unitSystem optional |
Typ:
UnitSystem optional |
PlacePredictionSelectEvent class
google.maps.places.PlacePredictionSelectEvent
zajęcia
To zdarzenie jest tworzone po wybraniu przez użytkownika elementu prognozy za pomocą elementu PlaceAutocompleteElement. Otwórz zaznaczenie, klikając event.placePrediction
.
Przekształć obiekt placePrediction w obiekt Place
, wywołując funkcję PlacePrediction.toPlace
.
Ta klasa rozszerza klasę Event
.
Dostęp przez połączenie pod numer const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Właściwości | |
---|---|
placePrediction |
Typ:
PlacePrediction Przekształć go w Place , dzwoniąc pod numer PlacePrediction.toPlace . |
PlaceAutocompleteRequestErrorEvent class
google.maps.places.PlaceAutocompleteRequestErrorEvent
zajęcia
To zdarzenie jest emitowane przez element PlaceAutocompleteElement, gdy wystąpi problem z żądaniem sieciowym.
Ta klasa rozszerza klasę Event
.
Dostęp przez połączenie pod numer const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
PlaceContextualElement class
google.maps.places.PlaceContextualElement
zajęcia
Widżet, który używa tokena kontekstu do wyświetlania kontekstowego widoku odpowiedzi Grounding z Mapami Google.
Element niestandardowy:
<gmp-place-contextual context-token="string"></gmp-place-contextual>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceContextualElementOptions
.
Dostęp przez połączenie pod numer const {PlaceContextualElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceContextualElement |
PlaceContextualElement([options]) Parametry:
|
Właściwości | |
---|---|
contextToken |
Typ:
string optional Token kontekstu.
Atrybut HTML:
|
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
PlaceContextualElementOptions interfejs
google.maps.places.PlaceContextualElementOptions
interfejs
Opcje dotyczące PlaceContextualElement
.
Właściwości | |
---|---|
contextToken optional |
Typ:
string optional Token kontekstu podany w odpowiedzi Grounding z Mapami Google. |
Klasa PlaceContextualListConfigElement
google.maps.places.PlaceContextualListConfigElement
zajęcia
Element HTML, który konfiguruje opcje widoku listy elementu kontekstowego miejsca.
Element niestandardowy:
<gmp-place-contextual-list-config layout="compact" map-hidden map-mode="none"></gmp-place-contextual-list-config>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceContextualListConfigElementOptions
.
Dostęp przez połączenie pod numer const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceContextualListConfigElement |
PlaceContextualListConfigElement([options]) Parametry:
|
Właściwości | |
---|---|
layout |
Typ:
PlaceContextualListLayout optional układ,
Atrybut HTML:
|
mapHidden |
Typ:
boolean optional Określa, czy mapa jest ukryta.
Atrybut HTML:
|
mapMode |
Typ:
PlaceContextualListMapMode optional Tryb mapy używany w kontekstowym elemencie miejsca w przypadku listy miejsc.
Atrybut HTML:
|
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
PlaceContextualListConfigElementOptions interfejs
google.maps.places.PlaceContextualListConfigElementOptions
interfejs
Opcje elementu PlaceContextualListConfigElement.
Właściwości | |
---|---|
layout optional |
Typ:
PlaceContextualListLayout optional Domyślnie:
PlaceContextualListLayout.VERTICAL układ, |
mapHidden optional |
Typ:
boolean optional Domyślnie:
false Wartość true, jeśli mapa ma być ukryta. |
mapMode optional |
Typ:
PlaceContextualListMapMode optional Domyślnie:
PlaceContextualListMapMode.ROADMAP Tryb mapy używany w kontekstowym elemencie miejsca w przypadku listy miejsc. |
PlaceContextualListLayout stałe
google.maps.places.PlaceContextualListLayout
stałe
Lista układów, które element kontekstowy miejsca obsługuje w widoku listy.
Dostęp przez połączenie pod numer const {PlaceContextualListLayout} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Stałe | |
---|---|
COMPACT |
Kompaktowy układ listy: elementy listy są renderowane jako linki w jednym wierszu, a elementy, które się nie mieszczą, są wyświetlane na liście rozwijanej. |
VERTICAL |
Układ listy pionowej: elementy listy są renderowane jako karty na liście pionowej. |
Stałe PlaceContextualListMapMode
google.maps.places.PlaceContextualListMapMode
stałe
Tryb mapy używany w kontekstowym elemencie miejsca w przypadku listy miejsc.
Dostęp przez połączenie pod numer const {PlaceContextualListMapMode} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Stałe | |
---|---|
HYBRID |
Przezroczysta warstwa głównych ulic na zdjęciach satelitarnych lub fotorealistycznych obrazach 3D. |
NONE |
Brak mapy. |
ROADMAP |
zwykłą mapę ulic 2D, |
PlaceDetailsElement class
google.maps.places.PlaceDetailsElement
zajęcia
Wyświetla szczegóły miejsca w pełnym układzie. Dodaj znak PlaceDetailsPlaceRequestElement
lub PlaceDetailsLocationRequestElement
, aby określić miejsce, które ma być renderowane. Dodaj PlaceContentConfigElement
, PlaceStandardContentElement
lub PlaceAllContentElement
, aby określić, które treści mają być renderowane.
Przykład:
<gmp-place-details>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-details>
Aby użyć tego elementu, włącz interfejs Places UI Kit API w projekcie w konsoli Google Cloud.
Element niestandardowy:
<gmp-place-details></gmp-place-details>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceDetailsElementOptions
.
Dostęp przez połączenie pod numer 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 miejsca zawierający identyfikator, lokalizację i obszar widoczny obecnie renderowanego miejsca. |
Właściwości CSS | |
---|---|
--gmp-button-border-color |
Kolor obramowania przycisku „Otwórz w Mapach”. |
--gmp-button-border-radius |
Promień obramowania przycisku „Otwórz w Mapach”. |
--gmp-button-border-width |
Szerokość obramowania przycisku „Otwórz w Mapach”. |
--gmp-collage-border-radius-outer |
Promień obramowania zewnętrznych rogów kolażu multimedialnego. |
--gmp-dialog-border-radius |
Promień obramowania okna z informacjami w Mapach Google. |
--gmp-mat-color-disabled-surface |
Kolor powierzchni, który ma wskazywać stan wyłączenia lub brak. Używany w przypadku pustych gwiazdek opinii. |
--gmp-mat-color-info |
Kolor elementów interfejsu z informacjami o wydźwięku. Używany w przypadku ikony wózka inwalidzkiego. |
--gmp-mat-color-negative |
Kolor elementów interfejsu o negatywnym wydźwięku. Używany w tekście „Zamknięte” w statusie „Otwarte”. |
--gmp-mat-color-neutral-container |
Kolor kontenera dla neutralnych wypełnionych elementów interfejsu. Używany w przypadku symboli zastępczych obrazów i plakietki z datą publikacji opinii. |
--gmp-mat-color-on-neutral-container |
Kolor tekstu i ikon na tle neutralnego koloru kontenera. Używany w przypadku plakietki z datą publikacji opinii i plakietki z informacją o dostępności ładowarki EV, gdy jest ona niedostępna. |
--gmp-mat-color-on-positive-container |
Kolor tekstu i ikon na tle koloru kontenera pozytywnego. Używane w przypadku plakietki dostępności ładowarki EV, jeśli jest dostępna. |
--gmp-mat-color-on-secondary-container |
Kolor tekstu i ikon na tle dodatkowego koloru kontenera. Używany w przypadku tekstu i ikon na przycisku „Otwórz w Mapach”. |
--gmp-mat-color-on-surface |
Kolor tekstu i ikon na dowolnym kolorze powierzchni. Używany w przypadku zwykłego tekstu. |
--gmp-mat-color-on-surface-variant |
Kolor o mniejszym kontraście w przypadku tekstu i ikon na dowolnym kolorze powierzchni. Używany w przypadku mniej wyróżnionego tekstu. |
--gmp-mat-color-outline-decorative |
Kolor obrysu elementów nieinteraktywnych. Używany w przypadku obramowania elementu. |
--gmp-mat-color-positive |
Kolor elementów interfejsu o pozytywnym wydźwięku. Używany w tekście „Otwarto” w statusie „Otwarto”. |
--gmp-mat-color-positive-container |
Kolor kontenera elementów interfejsu, które wyrażają pozytywne emocje. Używane w przypadku plakietki dostępności ładowarki EV, jeśli jest dostępna. |
--gmp-mat-color-primary |
Kolor interaktywnego tekstu i ikon na tle koloru powierzchni. Używany do określania liczby opinii, linków w oknie informacji w Mapach Google, linku do strony internetowej, ikon na karcie Przegląd oraz koloru tekstu, koloru po najechaniu kursorem i koloru po zaznaczeniu tytułów na pasku kart. |
--gmp-mat-color-secondary-container |
Mniej wyraźny kolor wypełnienia na powierzchni w przypadku komponentów recesywnych, takich jak przyciski tonalne. Używany jako tło przycisku „Otwórz w Mapach”. |
--gmp-mat-color-surface |
Kolor tła. Używany jako tło elementu i okna z informacjami o Mapach Google. |
--gmp-mat-font-body-medium |
Używane w przypadku adresu, oceny, typu, ceny, statusu „otwarte”, godzin otwarcia, opinii, numeru telefonu, strony internetowej, kodu plus, najważniejszych funkcji i tekstu w oknie informacji w Mapach Google. |
--gmp-mat-font-body-small |
Używany w tekście głównym na liście funkcji na karcie „O aplikacji”. |
--gmp-mat-font-display-small |
Używana w przypadku nazwy miejsca i tekstu każdego nagłówka funkcji na karcie „Informacje”. |
--gmp-mat-font-family |
Podstawowa rodzina czcionek używana w przypadku całego tekstu. |
--gmp-mat-font-headline-medium |
Używany jako tekst nagłówka w oknie informacji w Mapach Google. |
--gmp-mat-font-label-large |
Używany w tytułach kart, przycisku „Otwórz w Mapach”, tekście z informacją o autorze opinii w galerii zdjęć, tekście z informacją o autorze opinii w sekcji opinii oraz linkach w oknie informacji o Mapach Google. |
--gmp-mat-font-label-medium |
Używany w przypadku plakietki z liczbą zdjęć i plakietki z datą publikacji opinii. |
--gmp-mat-font-title-small |
Używana jako tytuł każdej sekcji na karcie „O mnie”. |
--gmp-mat-spacing-extra-large |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-extra-small |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-large |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-medium |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-small |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-two-extra-large |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-star-rating-color |
Kolor wypełnionych gwiazdek w ocenie. |
background-color |
Zastępuje kolor tła elementu. |
border |
Zastępuje obramowanie elementu. |
border-radius |
Zastępuje promień obramowania elementu. |
color-scheme |
Wskazuje, w jakim schemacie kolorów można renderować ten element. Więcej informacji znajdziesz w color-scheme dokumentacji. Domyślna wartość to color-scheme: light dark . |
font-size |
Skaluje cały tekst i ikony w elemencie, które są zdefiniowane wewnętrznie w jednostkach em. Domyślna wartość to 16px . |
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
Wydarzenia | |
---|---|
gmp-error |
function(event) Argumenty:
To zdarzenie jest uruchamiane, gdy żądanie do backendu zostało odrzucone (np. z powodu nieprawidłowego klucza interfejsu API). To zdarzenie nie jest propagowane. |
gmp-load |
function(event) Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoją zawartość. To zdarzenie nie jest propagowane. |
PlaceDetailsElementOptions interfejs
google.maps.places.PlaceDetailsElementOptions
interfejs
Opcje dotyczące PlaceDetailsElement
.
PlaceDetailsCompactElement class
google.maps.places.PlaceDetailsCompactElement
zajęcia
Wyświetla szczegóły miejsca w kompaktowym układzie. Dodaj symbol PlaceDetailsPlaceRequestElement
lub PlaceDetailsLocationRequestElement
, aby określić miejsce, które ma być renderowane. Dodaj PlaceContentConfigElement
, PlaceStandardContentElement
lub PlaceAllContentElement
, aby określić, które treści mają być renderowane.
Przykład:
<gmp-place-details-compact>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-details-compact>
Aby użyć tego elementu, włącz interfejs Places UI Kit API w projekcie w konsoli Google Cloud.
Element niestandardowy:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceDetailsCompactElementOptions
.
Dostęp przez połączenie pod numer const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceDetailsCompactElement |
PlaceDetailsCompactElement([options]) Parametry:
|
Właściwości | |
---|---|
orientation |
Typ:
PlaceDetailsOrientation optional Domyślnie:
PlaceDetailsOrientation.VERTICAL Wariant orientacji elementu (pionowy lub poziomy).
Atrybut HTML:
|
place |
Typ:
Place optional Tylko do odczytu. Obiekt miejsca zawierający identyfikator, lokalizację i obszar widoczny obecnie renderowanego miejsca. |
truncationPreferred |
Typ:
boolean Domyślnie:
false Jeśli ma wartość true, nazwa miejsca i adres są skracane, aby zmieściły się w jednym wierszu, zamiast być zawijane.
Atrybut HTML:
|
Właściwości CSS | |
---|---|
--gmp-button-border-color |
Kolor obramowania przycisku „Otwórz w Mapach”. |
--gmp-button-border-radius |
Promień obramowania przycisku „Otwórz w Mapach”. |
--gmp-button-border-width |
Szerokość obramowania przycisku „Otwórz w Mapach”. |
--gmp-dialog-border-radius |
Promień obramowania okna z informacjami w Mapach Google. |
--gmp-mat-color-info |
Kolor elementów interfejsu z informacjami o wydźwięku. Używany w przypadku ikony wózka inwalidzkiego. |
--gmp-mat-color-negative |
Kolor elementów interfejsu o negatywnym wydźwięku. Używany w tekście „Zamknięte” w statusie „Otwarte”. |
--gmp-mat-color-neutral-container |
Kolor kontenera dla neutralnych wypełnionych elementów interfejsu. Służy do tworzenia symboli zastępczych obrazów. |
--gmp-mat-color-on-secondary-container |
Kolor tekstu i ikon na tle dodatkowego koloru kontenera. Używany w przypadku tekstu i ikon na przycisku „Otwórz w Mapach”. |
--gmp-mat-color-on-surface |
Kolor tekstu i ikon na dowolnym kolorze powierzchni. Używany w przypadku zwykłego tekstu. |
--gmp-mat-color-on-surface-variant |
Kolor o mniejszym kontraście w przypadku tekstu i ikon na dowolnym kolorze powierzchni. Używany w przypadku mniej wyróżnionego tekstu. |
--gmp-mat-color-outline-decorative |
Kolor obrysu elementów nieinteraktywnych. Używany w przypadku obramowania elementu. |
--gmp-mat-color-positive |
Kolor elementów interfejsu o pozytywnym wydźwięku. Używany w tekście „Otwarto” w statusie „Otwarto”. |
--gmp-mat-color-primary |
Kolor interaktywnego tekstu i ikon na tle koloru powierzchni. Używany do określania liczby opinii oraz linków w oknie informacji w Mapach Google. |
--gmp-mat-color-secondary-container |
Mniej wyraźny kolor wypełnienia na powierzchni w przypadku komponentów recesywnych, takich jak przyciski tonalne. Używany jako tło przycisku „Otwórz w Mapach”. |
--gmp-mat-color-surface |
Kolor tła. Używany jako tło elementu i okna z informacjami o Mapach Google. |
--gmp-mat-font-body-medium |
Używany w tekście w oknie informacji w Mapach Google. |
--gmp-mat-font-body-small |
Używane w przypadku adresu, oceny, typu, ceny i stanu „otwarte” miejsca. |
--gmp-mat-font-family |
Podstawowa rodzina czcionek używana w przypadku całego tekstu. |
--gmp-mat-font-headline-medium |
Używany jako tekst nagłówka w oknie informacji w Mapach Google. |
--gmp-mat-font-label-large |
Używany w przypadku przycisku „Otwórz w Mapach”, a także linków w oknie informacji o Mapach Google i tekstu z informacjami o autorze opinii w galerii zdjęć. |
--gmp-mat-font-label-medium |
Używany w przypadku plakietki z liczbą zdjęć. |
--gmp-mat-font-title-small |
Używana w nazwie miejsca. |
--gmp-mat-spacing-extra-small |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-large |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-medium |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-small |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-star-rating-color |
Kolor wypełnionych gwiazdek w ocenie. |
--gmp-thumbnail-border-radius |
Promień obramowania miniatury miejsca. |
background-color |
Zastępuje kolor tła elementu. |
border |
Zastępuje obramowanie elementu. |
border-radius |
Zastępuje promień obramowania elementu. |
color-scheme |
Wskazuje, w jakim schemacie kolorów można renderować ten element. Więcej informacji znajdziesz w color-scheme dokumentacji. Domyślna wartość to color-scheme: light dark . |
font-size |
Skaluje cały tekst i ikony w elemencie, które są zdefiniowane wewnętrznie w jednostkach em. Domyślna wartość to 16px . |
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
Wydarzenia | |
---|---|
gmp-error |
function(event) Argumenty:
To zdarzenie jest uruchamiane, gdy żądanie do backendu zostało odrzucone (np. z powodu nieprawidłowego klucza interfejsu API). To zdarzenie nie jest propagowane. |
gmp-load |
function(event) Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoją zawartość. To zdarzenie nie jest propagowane. |
PlaceDetailsCompactElementOptions interfejs
google.maps.places.PlaceDetailsCompactElementOptions
interfejs
Opcje dotyczące PlaceDetailsCompactElement
.
Właściwości | |
---|---|
orientation optional |
Typ:
PlaceDetailsOrientation optional |
truncationPreferred optional |
Typ:
boolean optional |
PlaceDetailsOrientation stałe
google.maps.places.PlaceDetailsOrientation
stałe
Warianty orientacji dla PlaceDetailsCompactElement
.
Dostęp przez połączenie pod numer const {PlaceDetailsOrientation} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Stałe | |
---|---|
HORIZONTAL |
Orientacja pozioma. |
VERTICAL |
Orientacja pionowa. |
PlaceDetailsPlaceRequestElement class
google.maps.places.PlaceDetailsPlaceRequestElement
zajęcia
Konfiguruje PlaceDetailsCompactElement
lub PlaceDetailsElement
do wczytywania danych na podstawie obiektu miejsca, identyfikatora lub nazwy zasobu. Dołącz ten element jako element podrzędny elementu PlaceDetailsCompactElement
lub PlaceDetailsElement
, aby wczytać dane dotyczące określonego miejsca. Na przykład:
<gmp-place-details>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
</gmp-place-details>
Element niestandardowy:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceDetailsPlaceRequestElementOptions
.
Dostęp przez połączenie pod numer const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceDetailsPlaceRequestElement |
PlaceDetailsPlaceRequestElement([options]) Parametry:
|
Właściwości | |
---|---|
place |
Typ:
Place optional Domyślnie:
null Obiekt miejsca, identyfikator lub nazwa zasobu, dla którego mają być renderowane szczegóły w kompaktowym elemencie szczegółów miejsca. Ta właściwość odzwierciedla atrybut jako nazwę zasobu.
Atrybut HTML:
|
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
PlaceDetailsPlaceRequestElementOptions interfejs
google.maps.places.PlaceDetailsPlaceRequestElementOptions
interfejs
Opcje dotyczące PlaceDetailsPlaceRequestElement
.
Właściwości | |
---|---|
place optional |
Typ:
Place|string optional |
PlaceDetailsLocationRequestElement class
google.maps.places.PlaceDetailsLocationRequestElement
zajęcia
Konfiguruje PlaceDetailsCompactElement
lub PlaceDetailsElement
do wczytywania danych na podstawie lokalizacji. Dołącz ten element jako element podrzędny elementu PlaceDetailsCompactElement
lub PlaceDetailsElement
, aby wczytać dane dotyczące określonej lokalizacji. Na przykład:
<gmp-place-details>
<gmp-place-details-location-request
location="37.6207665,-122.4284806"
></gmp-place-details-location-request>
</gmp-place-details>
Element niestandardowy:
<gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceDetailsLocationRequestElementOptions
.
Dostęp przez połączenie pod numer const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceDetailsLocationRequestElement |
PlaceDetailsLocationRequestElement([options]) Parametry:
|
Właściwości | |
---|---|
location |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Domyślnie:
null Lokalizacja, dla której mają być renderowane szczegóły w elemencie Szczegóły miejsca. Normalizuje do wartości
LatLngAltitude .Atrybut HTML:
|
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
PlaceDetailsLocationRequestElementOptions interfejs
google.maps.places.PlaceDetailsLocationRequestElementOptions
interfejs
Opcje dotyczące PlaceDetailsLocationRequestElement
.
Właściwości | |
---|---|
location optional |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Lokalizacja, w której ma być renderowane miejsce. |
PlaceSearchElement class
google.maps.places.PlaceSearchElement
zajęcia
Wyświetla wyniki wyszukiwania miejsca w formie listy. Dodaj znak PlaceTextSearchRequestElement
lub PlaceNearbySearchRequestElement
, aby określić, dla którego żądania mają być renderowane wyniki. Dodaj PlaceContentConfigElement
, PlaceStandardContentElement
lub PlaceAllContentElement
, aby określić, które treści mają być renderowane.
Przykład:
<gmp-place-search>
<gmp-place-text-search-request
text-query="QUERY"
></gmp-place-text-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search>
Aby używać elementu wyszukiwania miejsca, włącz interfejs Places UI Kit API w projekcie w konsoli Google Cloud.
Element niestandardowy:
<gmp-place-search attribution-position="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceSearchElementOptions
.
Dostęp przez połączenie pod numer const {PlaceSearchElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceSearchElement |
PlaceSearchElement([options]) Parametry:
|
Właściwości | |
---|---|
attributionPosition |
Typ:
PlaceSearchAttributionPosition optional Domyślnie:
PlaceSearchAttributionPosition.TOP Położenie logo atrybucji i przycisku z informacjami prawnymi.
Atrybut HTML:
|
orientation |
Typ:
PlaceSearchOrientation optional Domyślnie:
PlaceSearchOrientation.VERTICAL Wariant orientacji elementu (pionowy lub poziomy).
Atrybut HTML:
|
places |
Tylko do odczytu. Tablica obiektów Place zawierająca identyfikatory, lokalizacje i obszary widoku aktualnie renderowanych miejsc. |
selectable |
Typ:
boolean optional Domyślnie:
false Czy elementy listy można wybrać. Jeśli ma wartość true, elementy listy będą przyciskami, które po kliknięciu wysyłają zdarzenie
gmp-select . Obsługiwana jest też dostępna nawigacja i wybór za pomocą klawiatury.Atrybut HTML:
|
truncationPreferred |
Typ:
boolean optional Domyślnie:
false Jeśli ta opcja jest włączona, niektóre wiersze treści są obcinane, aby zmieściły się w jednej linii, zamiast być zawijane.
Atrybut HTML:
|
Właściwości CSS | |
---|---|
--gmp-button-border-color |
Kolor obramowania przycisku „Otwórz w Mapach”. |
--gmp-button-border-radius |
Promień obramowania przycisku „Otwórz w Mapach”. |
--gmp-button-border-width |
Szerokość obramowania przycisku „Otwórz w Mapach”. |
--gmp-card-border-radius |
Promień obramowania kart miejsc. |
--gmp-dialog-border-radius |
Promień obramowania okna z informacjami o Mapach Google. |
--gmp-mat-color-info |
Kolor elementów interfejsu z informacjami o wydźwięku. Używana w przypadku ikony wejścia dla osób z niepełnosprawnością. |
--gmp-mat-color-negative |
Kolor elementów interfejsu o negatywnym wydźwięku. Używana w etykiecie „Zamknięte” w godzinach otwarcia miejsca. |
--gmp-mat-color-neutral-container |
Kolor kontenera dla neutralnych wypełnionych elementów interfejsu. Używane w przypadku plakietek z datą opinii i wczytywania kształtów zastępczych. |
--gmp-mat-color-on-neutral-container |
Kolor tekstu i ikon na neutralnym kontenerze. Używany w tekście daty weryfikacji i tekście błędu wczytywania. |
--gmp-mat-color-on-secondary-container |
Kolor tekstu i ikon na tle dodatkowego koloru kontenera. Używany w przypadku tekstu przycisków i ikon. |
--gmp-mat-color-on-surface |
Kolor tekstu i ikon na kolorze powierzchni. Używany w przypadku nagłówków i treści okien. |
--gmp-mat-color-on-surface-variant |
Kolor o mniejszym kontraście dla tekstu i ikon na kolorze powierzchni. Służy do wyświetlania informacji o miejscu. |
--gmp-mat-color-outline-decorative |
Kolor obrysu elementów nieinteraktywnych. Używany w przypadku obramowania kontenera. |
--gmp-mat-color-positive |
Kolor elementów interfejsu o pozytywnym wydźwięku. Używana w etykiecie „Otwarte” w godzinach otwarcia miejsca. |
--gmp-mat-color-primary |
Kolor interaktywnego tekstu i ikon na tle koloru powierzchni. Używany w przypadku linków, wskaźnika ładowania i ikon podglądu. |
--gmp-mat-color-secondary-container |
Mniej widoczny kolor wypełnienia na powierzchni. Używany jako tło przycisków. |
--gmp-mat-color-surface |
Kolor tła. Używany jako tło kontenerów i okien. |
--gmp-mat-font-body-small |
Służy do wyświetlania informacji o miejscu. |
--gmp-mat-font-family |
Podstawowa rodzina czcionek dla całego tekstu. |
--gmp-mat-font-headline-medium |
Służy do tworzenia nagłówków okien. |
--gmp-mat-font-label-large |
Używany w przypadku treści przycisku. |
--gmp-mat-font-title-medium |
Używana w nazwie miejsca. |
--gmp-mat-spacing-extra-small |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-large |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-medium |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-mat-spacing-small |
Służy do określania odstępów w elemencie, np. marginesu i dopełnienia wokół tekstu. |
--gmp-star-rating-color |
Kolor wypełnionych gwiazdek w ocenie. |
--gmp-thumbnail-border-radius |
Promień obramowania miniatury miejsca. |
background-color |
Zastępuje kolor tła elementu. |
border |
Zastępuje obramowanie elementu. |
border-radius |
Zastępuje promień obramowania elementu. |
color-scheme |
Wskazuje, w jakim schemacie kolorów można renderować ten element. Więcej informacji znajdziesz w color-scheme dokumentacji. Domyślna wartość to color-scheme: light dark . |
font-size |
Skaluje cały tekst i ikony w elemencie. Domyślna wartość to 16px . |
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
Wydarzenia | |
---|---|
gmp-error |
function(event) Argumenty:
To zdarzenie jest uruchamiane, gdy żądanie do backendu zostało odrzucone (np. z powodu nieprawidłowego klucza interfejsu API). To zdarzenie nie jest propagowane. |
gmp-load |
function(event) Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoją zawartość. To zdarzenie nie jest propagowane. |
gmp-select |
function(event) Argumenty:
To zdarzenie jest wywoływane, gdy z listy zostanie wybrane miejsce. Zawiera obiekt Place z identyfikatorem, lokalizacją i obszarem widoku wybranego miejsca. |
PlaceSearchElementOptions interfejs
google.maps.places.PlaceSearchElementOptions
interfejs
Opcje dotyczące PlaceSearchElement
.
Właściwości | |
---|---|
attributionPosition optional |
Typ:
PlaceSearchAttributionPosition optional |
orientation optional |
Typ:
PlaceSearchOrientation optional Zobacz PlaceSearchElement.orientation . |
selectable optional |
Typ:
boolean optional Zobacz: PlaceSearchElement.selectable |
truncationPreferred optional |
Typ:
boolean optional |
Stałe PlaceSearchAttributionPosition
google.maps.places.PlaceSearchAttributionPosition
stałe
Pozycje atrybucji dla PlaceSearchElement
.
Dostęp przez połączenie pod numer const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Stałe | |
---|---|
BOTTOM |
Atrybucja u dołu elementu PlaceSearchElement |
TOP |
Atrybucja u góry elementu PlaceSearchElement |
Stałe PlaceSearchOrientation
google.maps.places.PlaceSearchOrientation
stałe
Warianty orientacji dla PlaceSearchElement
.
Dostęp przez połączenie pod numer const {PlaceSearchOrientation} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Stałe | |
---|---|
HORIZONTAL |
Orientacja pozioma. |
VERTICAL |
Orientacja pionowa. |
PlaceSelectEvent class
google.maps.places.PlaceSelectEvent
zajęcia
To zdarzenie jest wywoływane, gdy miejsce zostanie wybrane z listy miejsc. Otwórz zaznaczenie, klikając event.place
.
Ta klasa rozszerza klasę Event
.
Dostęp przez połączenie pod numer const {PlaceSelectEvent} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Właściwości | |
---|---|
place |
Typ:
Place Wybrane miejsce. |
PlaceNearbySearchRequestElement class
google.maps.places.PlaceNearbySearchRequestElement
zajęcia
Konfiguruje PlaceSearchElement
, aby wczytywać wyniki na podstawie żądania wyszukiwania w pobliżu. Właściwość locationRestriction
jest wymagana, aby element wyszukiwania mógł się wczytać. Jeśli parametr locationRestriction
nie jest ustawiony, wszystkie inne skonfigurowane właściwości są ignorowane. Dołącz ten element jako element podrzędny elementu PlaceSearchElement
, aby wczytać wyniki. Na przykład:
<gmp-place-search>
<gmp-place-nearby-search-request
location-restriction="RADIUS@LAT,LNG"
></gmp-place-nearby-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search>
Element niestandardowy:
<gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." excluded-types="excluded-type1 excluded-type2..." included-primary-types="included-primary-type1 included-primary-type2..." included-types="included-type1 included-type2..." location-restriction="radius@lat,lng" max-result-count="number" rank-preference="preference"></gmp-place-nearby-search-request>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceNearbySearchRequestElementOptions
.
Dostęp przez połączenie pod numer const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceNearbySearchRequestElement |
PlaceNearbySearchRequestElement([options]) Parametry:
|
Właściwości | |
---|---|
excludedPrimaryTypes |
Typ:
Array<string> optional Domyślnie:
null Atrybut HTML:
|
excludedTypes |
Typ:
Array<string> optional Domyślnie:
null Atrybut HTML:
|
includedPrimaryTypes |
Typ:
Array<string> optional Domyślnie:
null Atrybut HTML:
|
includedTypes |
Typ:
Array<string> optional Domyślnie:
null Atrybut HTML:
|
locationRestriction |
Typ:
Circle|CircleLiteral optional Domyślnie:
null Atrybut HTML:
|
maxResultCount |
Typ:
number optional Domyślnie:
null Atrybut HTML:
|
rankPreference |
Typ:
SearchNearbyRankPreference optional Domyślnie:
null Atrybut HTML:
|
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
PlaceNearbySearchRequestElementOptions interfejs
google.maps.places.PlaceNearbySearchRequestElementOptions
interfejs
Opcje dotyczące PlaceNearbySearchRequestElement
.
Właściwości | |
---|---|
excludedPrimaryTypes optional |
Typ:
Array<string> optional Wykluczone główne typy miejsc. Więcej informacji znajdziesz w sekcjach PlaceNearbySearchRequestElement.excludedPrimaryTypes i SearchNearbyRequest.excludedPrimaryTypes . |
excludedTypes optional |
Typ:
Array<string> optional Wykluczone typy miejsc. Więcej informacji znajdziesz w sekcjach PlaceNearbySearchRequestElement.excludedTypes i SearchNearbyRequest.excludedTypes . |
includedPrimaryTypes optional |
Typ:
Array<string> optional Uwzględnione główne typy miejsc. Więcej informacji znajdziesz w sekcjach PlaceNearbySearchRequestElement.includedPrimaryTypes i SearchNearbyRequest.includedPrimaryTypes . |
includedTypes optional |
Typ:
Array<string> optional Uwzględnione typy miejsc. Więcej informacji znajdziesz w sekcjach PlaceNearbySearchRequestElement.includedTypes i SearchNearbyRequest.includedTypes . |
locationRestriction optional |
Typ:
Circle|CircleLiteral optional Region, w którym ma się odbywać wyszukiwanie. Więcej informacji znajdziesz w sekcjach PlaceNearbySearchRequestElement.locationRestriction i SearchNearbyRequest.locationRestriction . |
maxResultCount optional |
Typ:
number optional Maksymalna liczba wyników do zwrócenia. Więcej informacji znajdziesz w sekcjach PlaceNearbySearchRequestElement.maxResultCount i SearchNearbyRequest.maxResultCount . |
rankPreference optional |
Typ:
SearchNearbyRankPreference optional Określa kolejność wyników w odpowiedzi. Więcej informacji znajdziesz w sekcjach PlaceNearbySearchRequestElement.rankPreference i SearchNearbyRankPreference . |
PlaceTextSearchRequestElement class
google.maps.places.PlaceTextSearchRequestElement
zajęcia
Konfiguruje element PlaceSearchElement
, aby wczytywać wyniki na podstawie żądania wyszukiwania tekstowego. Właściwość textQuery
jest wymagana, aby element wyszukiwania mógł się wczytać. Jeśli parametr textQuery
nie jest ustawiony, wszystkie inne skonfigurowane właściwości są ignorowane. Dołącz ten element jako element podrzędny elementu PlaceSearchElement
, aby wczytać wyniki. Na przykład:
<gmp-place-search>
<gmp-place-text-search-request
text-query="QUERY"
></gmp-place-text-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search>
Element niestandardowy:
<gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..." ev-minimum-charging-rate-kw="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>
Ta klasa rozszerza klasę HTMLElement
.
Ta klasa implementuje interfejs PlaceTextSearchRequestElementOptions
.
Dostęp przez połączenie pod numer const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
PlaceTextSearchRequestElement |
PlaceTextSearchRequestElement([options]) Parametry:
|
Właściwości | |
---|---|
evConnectorTypes |
Typ:
Array<EVConnectorType> optional Domyślnie:
null Atrybut HTML:
|
evMinimumChargingRateKw |
Typ:
number optional Domyślnie:
null Atrybut HTML:
|
includedType |
Typ:
string optional Domyślnie:
null Atrybut HTML:
|
isOpenNow |
Typ:
boolean optional Domyślnie:
null Atrybut HTML:
|
locationBias |
Typ:
string|LatLngAltitude|LatLngBounds|Circle|LatLng|LatLngLiteral|LatLngAltitudeLiteral|LatLngBoundsLiteral|CircleLiteral optional Domyślnie:
null Atrybut HTML:
|
locationRestriction |
Typ:
LatLngBounds|LatLngBoundsLiteral optional Domyślnie:
null Atrybut HTML:
|
maxResultCount |
Typ:
number optional Domyślnie:
null Atrybut HTML:
|
minRating |
Typ:
number optional Domyślnie:
null Atrybut HTML:
|
priceLevels |
Typ:
Array<PriceLevel> optional Domyślnie:
null Atrybut HTML:
|
rankPreference |
Typ:
SearchByTextRankPreference optional Domyślnie:
null Atrybut HTML:
|
textQuery |
Typ:
string optional Domyślnie:
null Atrybut HTML:
|
useStrictTypeFiltering |
Typ:
boolean optional Domyślnie:
null Atrybut HTML:
|
Metody | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Konfiguruje funkcję, która będzie wywoływana za każdym razem, gdy określone zdarzenie zostanie dostarczone do celu. Zobacz addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options]) Parametry:
Zwracana wartość:
void Usuwa z obiektu docelowego detektor zdarzeń zarejestrowany wcześniej za pomocą metody addEventListener. Zobacz removeEventListener. |
PlaceTextSearchRequestElementOptions interfejs
google.maps.places.PlaceTextSearchRequestElementOptions
interfejs
Opcje dotyczące PlaceTextSearchRequestElement
.
Właściwości | |
---|---|
evConnectorTypes optional |
Typ:
Array<EVConnectorType> optional Lista preferowanych typów złączy EV. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.evSearchOptions i PlaceTextSearchRequestElement.evConnectorTypes . |
evMinimumChargingRateKw optional |
Typ:
number optional Minimalna wymagana moc ładowania w kilowatach. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.evSearchOptions i PlaceTextSearchRequestElement.evMinimumChargingRateKw . |
includedType optional |
Typ:
string optional Rodzaj miejsca, o który prosisz. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.includedType i PlaceTextSearchRequestElement.includedType . |
isOpenNow optional |
Typ:
boolean optional Służy do ograniczenia wyszukiwania do miejsc, które są obecnie otwarte. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.isOpenNow i PlaceTextSearchRequestElement.isOpenNow . |
locationBias optional |
Typ:
string|LatLngAltitude|LatLngBounds|Circle|LatLng|LatLngLiteral|LatLngAltitudeLiteral|LatLngBoundsLiteral|CircleLiteral optional Wpływ lokalizacji na wyszukiwanie. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.locationBias i PlaceTextSearchRequestElement.locationBias . |
locationRestriction optional |
Typ:
LatLngBounds|LatLngBoundsLiteral optional Ograniczenie lokalizacji wyszukiwania. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.locationRestriction i PlaceTextSearchRequestElement.locationRestriction . |
maxResultCount optional |
Typ:
number optional Maksymalna liczba wyników do zwrócenia. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.maxResultCount i PlaceTextSearchRequestElement.maxResultCount . |
minRating optional |
Typ:
number optional Filtruje wyniki, których średnia ocena użytkowników jest ściśle mniejsza niż ten limit. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.minRating i PlaceTextSearchRequestElement.minRating . |
priceLevels optional |
Typ:
Array<PriceLevel> optional Służy do ograniczenia wyszukiwania do miejsc oznaczonych jako określone poziomy cen. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.priceLevels i PlaceTextSearchRequestElement.priceLevels . |
rankPreference optional |
Typ:
SearchByTextRankPreference optional Określa kolejność wyników w odpowiedzi. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.rankPreference i PlaceTextSearchRequestElement.rankPreference . |
textQuery optional |
Typ:
string optional Zapytanie tekstowe do wyszukiwania tekstowego. Więcej informacji znajdziesz w sekcjach SearchByTextRequest.textQuery i PlaceTextSearchRequestElement.textQuery . |
useStrictTypeFiltering optional |
Typ:
boolean optional Służy do ustawiania filtrowania ścisłego typu dla SearchByTextRequest.includedType . Więcej informacji znajdziesz w sekcjach SearchByTextRequest.useStrictTypeFiltering i PlaceTextSearchRequestElement.useStrictTypeFiltering . |
Klasa Autocomplete
google.maps.places.Autocomplete
zajęcia
Widżet, który na podstawie tekstu wpisanego przez użytkownika podaje prognozy dotyczące miejsc. Jest dołączony do elementu wejściowego typu text
i nasłuchuje wpisywania tekstu w tym polu. Lista prognoz jest wyświetlana jako lista rozwijana i aktualizowana w miarę wpisywania tekstu.
Ta klasa rozszerza klasę MVCObject
.
Dostęp przez połączenie pod numer const {Autocomplete} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) Parametry:
Tworzy nową instancję Autocomplete , która jest dołączana do określonego pola tekstowego z podanymi opcjami. |
Metody | |
---|---|
getBounds |
getBounds() Parametry: brak
Zwracana wartość:
LatLngBounds|undefined granice odchylenia.Zwraca zakres, w którym prognozy są obciążone. |
getFields |
getFields() Parametry: brak
Zwracana wartość:
Array<string>|undefined Zwraca pola, które mają być uwzględnione w odpowiedzi ze szczegółami miejsca, gdy szczegóły zostaną pobrane. Listę pól znajdziesz na stronie PlaceResult . |
getPlace |
getPlace() Parametry: brak
Wartość zwracana:
PlaceResult miejsce wybrane przez użytkownika.Zwraca szczegóły miejsca wybranego przez użytkownika, jeśli zostały one pobrane. W przeciwnym razie zwraca obiekt 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 komponentu służą do ograniczania prognoz tylko 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 odpowiedzi ze szczegółami miejsca po ich pobraniu. 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. Listę obsługiwanych typów znajdziesz w przewodniku dla programistów. Jeśli nie określisz typów, zostaną zwrócone wszystkie typy. |
Odziedziczone:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Wydarzenia | |
---|---|
place_changed |
function() Argumenty: brak
To zdarzenie jest wywoływane, gdy PlaceResult jest udostępniana w miejscu wybranym przez użytkownika. Jeśli użytkownik wpisze nazwę miejsca, która nie została zasugerowana przez kontrolkę, i naciśnie klawisz Enter lub jeśli żądanie szczegółów miejsca nie powiedzie się, obiekt PlaceResult będzie zawierać dane wejściowe użytkownika we właściwości name bez zdefiniowanych innych właściwości. |
AutocompleteOptions interfejs
google.maps.places.AutocompleteOptions
interfejs
Opcje, które można ustawić w obiekcie Autocomplete
.
Właściwości | |
---|---|
bounds optional |
Typ:
LatLngBounds|LatLngBoundsLiteral optional Obszar, w którym chcesz wyszukać miejsca. |
componentRestrictions optional |
Typ:
ComponentRestrictions optional Ograniczenia dotyczące komponentu. Ograniczenia komponentu służą do ograniczania prognoz tylko 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 odpowiedzi ze szczegółami miejsca po ich pobraniu (za które zostanie naliczona opłata). Jeśli przekażesz wartość ['ALL'] , zwracane będą wszystkie dostępne pola, za które będziesz płacić (nie jest to zalecane w przypadku wdrożeń produkcyjnych). Listę pól znajdziesz na stronie PlaceResult . Pola zagnieżdżone można określić za pomocą ścieżek z kropkami (np. "geometry.location" ). Wartość domyślna to ['ALL'] . |
|
Typ:
boolean optional Określa, czy mają być pobierane tylko identyfikatory miejsc. Obiekt PlaceResult udostępniany po wywołaniu zdarzenia place_changed będzie zawierać tylko pola place_id, types i name, a pola place_id, types i description będą zwracane przez usługę Autocomplete. Domyślnie wyłączona. |
strictBounds optional |
Typ:
boolean optional Wartość logiczna wskazująca, że widżet autouzupełniania ma zwracać tylko te miejsca, które w momencie wysłania zapytania znajdują się w jego granicach. Ustawienie parametru strictBounds na false (wartość domyślna) spowoduje, że wyniki będą bardziej ukierunkowane na miejsca znajdujące się w granicach, ale nie będą się do nich ograniczać. |
types optional |
Typ:
Array<string> optional Typy prognoz, które mają zostać zwrócone. Listę obsługiwanych typów znajdziesz w przewodniku dla programistów. Jeśli nie określisz typów, zostaną zwrócone wszystkie typy. |
SearchBox class
google.maps.places.SearchBox
zajęcia
Widżet, który wyświetla prognozy zapytań na podstawie tekstu wpisanego przez użytkownika. Jest dołączony do elementu wejściowego typu text
i nasłuchuje wpisywania tekstu w tym polu. Lista prognoz jest wyświetlana jako lista rozwijana i aktualizowana w miarę wpisywania tekstu.
Ta klasa rozszerza klasę MVCObject
.
Dostęp przez połączenie pod numer const {SearchBox} = await google.maps.importLibrary("places")
.
Zobacz Biblioteki w Maps JavaScript API.
Zespół | |
---|---|
SearchBox |
SearchBox(inputField[, opts]) Parametry:
Tworzy nową instancję SearchBox , która jest dołączana do określonego pola tekstowego z podanymi opcjami. |
Metody | |
---|---|
getBounds |
getBounds() Parametry: brak
Zwracana wartość:
LatLngBounds|undefined Zwraca granice, do których są odchylone prognozy z zapytania. |
getPlaces |
getPlaces() Parametry: brak
Zwracana wartość:
Array<PlaceResult>|undefined Zwraca zapytanie wybrane przez użytkownika do użycia ze zdarzeniem places_changed . |
setBounds |
setBounds(bounds) Parametry:
Zwracana wartość: brak
Ustawia region, który ma być używany do określania prognoz zapytań. Wyniki będą tylko ukierunkowane na ten obszar, ale nie będą do niego całkowicie ograniczone. |
Odziedziczone:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Wydarzenia | |
---|---|
places_changed |
function() Argumenty: brak
To zdarzenie jest wywoływane, gdy użytkownik wybierze zapytanie. getPlaces powinno być używane do uzyskiwania nowych miejsc. |
SearchBoxOptions interfejs
google.maps.places.SearchBoxOptions
interfejs
Opcje, które można ustawić w obiekcie SearchBox
.
Właściwości | |
---|---|
bounds optional |
Typ:
LatLngBounds|LatLngBoundsLiteral optional Obszar, w którym mają być faworyzowane prognozy zapytań. Prognozy są ukierunkowane na zapytania dotyczące tych zakresów, ale nie są do nich ograniczone. |