Klasa PlaceAutocompleteElement
class
google.maps.places.PlaceAutocompleteElement
extends HTMLElement
implements PlaceAutocompleteElementOptions
library "places"
PlaceAutocompleteElement to podklasa HTMLElement, która udostępnia komponent interfejsu dla interfejsu API Autouzupełniania miejsc.
Element PlaceAutocompleteElement automatycznie używa wewnętrznie AutocompleteSessionToken, aby grupować fazy zapytania i wyboru w ramach wyszukiwania z autouzupełnianiem przez użytkownika.
Pierwsze wywołanie metody Place.fetchFields w obiekcie Place zwróconym przez PlacePrediction.toPlace będzie automatycznie zawierać token sesji użyty do pobrania obiektu PlacePrediction.
Więcej informacji o tym, jak działają sesje, znajdziesz na stronie https://developers.google.com/maps/documentation/places/web-service/place-session-tokens.
<gmp-place-autocomplete description="string" disabled future-opening-businesses-included included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." internal-usage-attribution-ids="space separated strings" maxlength="number" name="string" no-clear-button no-input-icon origin="lat,lng" placeholder="string" pure-service-area-businesses-included readonly requested-language="string" requested-region="string" unit-system="value-name"> </gmp-place-autocomplete>
const {PlaceAutocompleteElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement([options])Parametry:
|
Właściwości | |
|---|---|
description
attr: description |
Typ:
string optionalOpis, który ma być używany w przypadku elementu wejściowego. Czytniki ekranu wykryją to, gdy element wejściowy będzie zaznaczony. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby.
Atrybut HTML: description="string" |
disabled
attr: disabled |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanCzy element wejściowy jest wyłączony. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled.
Atrybut HTML: disabled |
futureOpeningBusinessesIncluded
attr: future-opening-businesses-included |
Typ:
boolean optionalOkreśla, czy uwzględniać miejsca, które nie są jeszcze otwarte, ale mają zostać otwarte w przyszłości.
Atrybut HTML: future-opening-businesses-included |
includedPrimaryTypes
attr: included-primary-types |
Typ:
Array<string> optionalUwzględniony główny typ miejsca (np. „restauracja” lub „stacja_paliw”).
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 są wszystkie typy miejsc. Atrybut HTML: included-primary-types="type1 type2 type3..." |
includedRegionCodes
attr: included-region-codes |
Typ:
Array<string> optionalUwzglę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 ustawione są zarówno
locationRestriction, jak i includedRegionCodes, wyniki będą znajdować się w obszarze przecięcia.Atrybut HTML: included-region-codes="c1 c2 c3..." |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS.
Atrybut HTML: internal-usage-attribution-ids="space separated strings" |
locationBias |
Typ:
LocationBias optionalMiękka granica lub wskazówka do użycia podczas wyszukiwania miejsc. |
locationRestriction |
Typ:
LocationRestriction optionalGranice ograniczające wyniki wyszukiwania. |
maxlength
attr: maxlength |
Typ:
number optionalMaksymalna liczba znaków, które użytkownik może wpisać. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength.
Atrybut HTML: maxlength="number" |
name
attr: name |
Typ:
string optionalNazwa, która ma być używana w przypadku elementu wejściowego. Więcej informacji 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. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
Atrybut HTML: name="string" |
noClearButton
attr: no-clear-button |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanOkreśla, czy przycisk czyszczenia ma być ukryty.
Atrybut HTML: no-clear-button |
noInputIcon
attr: no-input-icon |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanOkreśla, czy ukryć ikonę wejścia.
Atrybut HTML: no-input-icon |
origin
attr: origin |
Typ danych wejściowych:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalTyp danych wyjściowych: LatLngAltitude optionalPunkt początkowy, od którego ma być obliczana odległość. Jeśli nie określisz tej wartości, odległość nie zostanie obliczona. Wysokość, jeśli jest podana, nie jest używana w obliczeniach.
Atrybut HTML:
|
placeholder
attr: placeholder |
Typ:
string optionalTekst zastępczy, który ma być używany w elemencie wejściowym. Szczegółowe informacje znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder.
Atrybut HTML: placeholder="string" |
pureServiceAreaBusinessesIncluded
attr: pure-service-area-businesses-included |
Typ:
boolean optionalOkreśla, czy uwzględniać miejsca, które są wyłącznie firmami działającymi na określonym obszarze.
Atrybut HTML: pure-service-area-businesses-included |
readonly
attr: readonly |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanOkreśla, czy element wejściowy jest tylko do odczytu. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly.
Atrybut HTML: readonly |
requestedLanguage
attr: requested-language |
Typ:
string optionalIdentyfikator języka, w którym powinny 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: requested-language="string" |
requestedRegion
attr: requested-region |
Typ:
string optionalKod regionu, który jest używany do formatowania i filtrowania wyników. Nie ogranicza 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 domena 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: requested-region="string" |
unitSystem
attr: unit-system |
Układ jednostek używany do wyświetlania odległości. Jeśli nie zostanie określony, system jednostek jest określany przez parametr requestedRegion.
Atrybut HTML: unit-system="value-name" |
value |
Typ danych wejściowych:
string optionalTyp danych wyjściowych: stringWartość elementu wejściowego. |
Przedziały | |
|---|---|
clear-icon |
Umieszcza element z gniazdem w pozycji ikony czyszczenia. Przycisk czyszczenia jest wyświetlany na końcu pola wejściowego, gdy znajduje się w nim tekst. |
input-icon |
Umieszcza element z gniazdem w pozycji ikony wejściowej. Ikona wejściowa wyświetla się na początku pola wejściowego w trybie inline. |
prediction-item-icon |
To miejsce akceptuje dokładnie 1 element <template>, który jest renderowany jako ikona wyświetlana obok elementu podpowiedzi. |
Części | |
|---|---|
focus-ring |
Element używany do wyświetlania pierścienia zaznaczenia wokół zaznaczonego elementu (elementu wejściowego lub podpowiedzi) |
input |
Element wejściowy elementu autouzupełniania. |
prediction-item |
Element w menu podpowiedzi, który reprezentuje pojedynczą podpowiedź. |
prediction-item-icon |
Ikona wyświetlana po lewej stronie każdego elementu na liście podpowiedzi. |
prediction-item-main-text |
Część elementu podpowiedzi, która jest głównym tekstem podpowiedzi. W przypadku położeń geograficznych zawiera nazwę miejsca, np. „Sydney”, lub nazwę ulicy i numer, np. „ul. Królewska 10”. Domyślnie element prediction-item-main-text jest czarny. Jeśli w elemencie prediction-item znajduje się dodatkowy tekst, jest on poza elementem prediction-item-main-text i dziedziczy styl z elementu prediction-item. Domyślnie jest szary. Dodatkowy tekst to zwykle adres. |
prediction-item-match |
Część zwróconej podpowiedzi, która pasuje do danych wpisanych przez użytkownika. Domyślnie dopasowany tekst jest pogrubiony. Zwróć uwagę, że dopasowany tekst jest wyróżniony tylko w elemencie prediction-item-main-text. |
prediction-item-nonmatch |
Część głównego tekstu podpowiedzi, która nie pasuje do danych wprowadzonych przez użytkownika. |
prediction-item-secondary-text |
Część elementu podpowiedzi, która jest dodatkowym tekstem podpowiedzi. Dodatkowy tekst to zwykle adres. |
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 tej części, jak i style części podpowiedzi. |
prediction-list |
Element wizualny zawierający listę podpowiedzi 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 |
Zastępuje czcionkę elementu. |
color-scheme |
Wskazuje, w jakim schemacie kolorów może być renderowany ten element. Więcej informacji znajdziesz w color-scheme dokumentacji. Domyślna wartość to color-scheme: light dark. |
font |
Zastępuje czcionkę elementu. |
font-family |
Zastępuje czcionkę elementu. |
font-size |
Zastępuje czcionkę elementu. |
font-style |
Zastępuje czcionkę elementu. |
font-weight |
Zastępuje czcionkę elementu. |
line-height |
Zastępuje czcionkę elementu. |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
gmp-error |
function(errorEvent)Argumenty:
To zdarzenie jest wywoływane, gdy żądanie do backendu zostało odrzucone (np. nieprawidłowy klucz interfejsu API). To zdarzenie nie jest przekazywane w górę. |
gmp-select |
function(placePredictionSelectEvent)Argumenty:
To zdarzenie jest wywoływane, gdy użytkownik wybierze podpowiedź miejsca. Zawiera obiekt PlacePrediction, który można przekonwertować na obiekt Place. |
PlaceAutocompleteElementOptions
interfejs
google.maps.places.PlaceAutocompleteElementOptions
zaimplementowany przez PlaceAutocompleteElement
Opcje tworzenia elementu PlaceAutocompleteElement. Opis każdej właściwości znajdziesz we właściwości o tej samej nazwie w klasie PlaceAutocompleteElement.
Właściwości | |
|---|---|
description
opcjonalne |
Typ:
string optionalOpis, który ma być używany w przypadku elementu wejściowego. Czytniki ekranu wykryją to, gdy element wejściowy będzie zaznaczony. |
disabled
opcjonalne |
Typ:
boolean optional |
futureOpeningBusinessesIncluded
opcjonalne |
Typ:
boolean optional |
includedPrimaryTypes
opcjonalne |
Typ:
Array<string> optional |
includedRegionCodes
opcjonalne |
Typ:
Array<string> optional |
internalUsageAttributionIds
opcjonalne |
Typ:
Iterable<string> optional |
locationBias
opcjonalne |
Typ:
LocationBias optional |
locationRestriction
opcjonalne |
Typ:
LocationRestriction optional |
maxlength
opcjonalne |
Typ:
number optional |
name
opcjonalne |
Typ:
string optional |
noClearButton
opcjonalne |
Typ:
boolean optional |
noInputIcon
opcjonalne |
Typ:
boolean optional |
origin
opcjonalne |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
placeholder
opcjonalne |
Typ:
string optional |
pureServiceAreaBusinessesIncluded
opcjonalne |
Typ:
boolean optional |
readonly
opcjonalne |
Typ:
boolean optional |
requestedLanguage
opcjonalne |
Typ:
string optional |
requestedRegion
opcjonalne |
Typ:
string optional |
unitSystem
opcjonalne |
Typ:
UnitSystem optional |
value
opcjonalne |
Typ:
string optionalWartość elementu wejściowego. |
Klasa PlacePredictionSelectEvent
class
google.maps.places.PlacePredictionSelectEvent
extends Event
library "places"
To zdarzenie jest tworzone, gdy użytkownik wybierze element podpowiedzi za pomocą PlaceAutocompleteElement. Aby uzyskać dostęp do wyboru, naciśnij event.placePrediction.
Przekonwertuj placePrediction na Place, wywołując PlacePrediction.toPlace.
const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places");
Właściwości | |
|---|---|
placePrediction
readonly |
Typ:
PlacePredictionPrzekształć to w Place, wywołując PlacePrediction.toPlace. |
BasicPlaceAutocompleteElement class
class
google.maps.places.BasicPlaceAutocompleteElement
extends HTMLElement
implements BasicPlaceAutocompleteElementOptions
library "places"
BasicPlaceAutocompleteElement to podklasa HTMLElement, która udostępnia komponent interfejsu dla interfejsu Autouzupełniania miejsc API.
<gmp-basic-place-autocomplete description="string" disabled future-opening-businesses-included included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." internal-usage-attribution-ids="space separated strings" maxlength="number" name="string" no-clear-button no-input-icon origin="lat,lng" placeholder="string" pure-service-area-businesses-included readonly requested-language="string" requested-region="string" unit-system="value-name"> </gmp-basic-place-autocomplete>
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
BasicPlaceAutocompleteElement |
BasicPlaceAutocompleteElement([options])Parametry:
|
Właściwości | |
|---|---|
description
attr: description |
Typ:
string optionalOpis, który ma być używany w przypadku elementu wejściowego. Czytniki ekranu wykryją to, gdy element wejściowy będzie zaznaczony. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby.
Atrybut HTML: description="string" |
disabled
attr: disabled |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanCzy element wejściowy jest wyłączony. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled.
Atrybut HTML: disabled |
futureOpeningBusinessesIncluded
attr: future-opening-businesses-included |
Typ:
boolean optionalOkreśla, czy uwzględniać miejsca, które nie są jeszcze otwarte, ale mają zostać otwarte w przyszłości.
Atrybut HTML: future-opening-businesses-included |
includedPrimaryTypes
attr: included-primary-types |
Typ:
Array<string> optionalUwzględniony główny typ miejsca (np. „restauracja” lub „stacja_paliw”).
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 są wszystkie typy miejsc. Atrybut HTML: included-primary-types="type1 type2 type3..." |
includedRegionCodes
attr: included-region-codes |
Typ:
Array<string> optionalUwzglę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 ustawione są zarówno
locationRestriction, jak i includedRegionCodes, wyniki będą znajdować się w obszarze przecięcia.Atrybut HTML: included-region-codes="c1 c2 c3..." |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS.
Atrybut HTML: internal-usage-attribution-ids="space separated strings" |
locationBias |
Typ:
LocationBias optionalMiękka granica lub wskazówka do użycia podczas wyszukiwania miejsc. |
locationRestriction |
Typ:
LocationRestriction optionalGranice ograniczające wyniki wyszukiwania. |
maxlength
attr: maxlength |
Typ:
number optionalMaksymalna liczba znaków, które użytkownik może wpisać. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength.
Atrybut HTML: maxlength="number" |
name
attr: name |
Typ:
string optionalNazwa, która ma być używana w przypadku elementu wejściowego. Więcej informacji 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. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
Atrybut HTML: name="string" |
noClearButton
attr: no-clear-button |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanOkreśla, czy przycisk czyszczenia ma być ukryty.
Atrybut HTML: no-clear-button |
noInputIcon
attr: no-input-icon |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanOkreśla, czy ukryć ikonę wejścia.
Atrybut HTML: no-input-icon |
origin
attr: origin |
Typ danych wejściowych:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalTyp danych wyjściowych: LatLngAltitude optionalPunkt początkowy, od którego ma być obliczana odległość. Jeśli nie określisz tej wartości, odległość nie zostanie obliczona. Wysokość, jeśli jest podana, nie jest używana w obliczeniach.
Atrybut HTML:
|
placeholder
attr: placeholder |
Typ:
string optionalTekst zastępczy, który ma być używany w elemencie wejściowym. Szczegółowe informacje znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder.
Atrybut HTML: placeholder="string" |
pureServiceAreaBusinessesIncluded
attr: pure-service-area-businesses-included |
Typ:
boolean optionalOkreśla, czy uwzględniać miejsca, które są wyłącznie firmami działającymi na określonym obszarze.
Atrybut HTML: pure-service-area-businesses-included |
readonly
attr: readonly |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanOkreśla, czy element wejściowy jest tylko do odczytu. Więcej informacji znajdziesz na stronie https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly.
Atrybut HTML: readonly |
requestedLanguage
attr: requested-language |
Typ:
string optionalIdentyfikator języka, w którym powinny 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: requested-language="string" |
requestedRegion
attr: requested-region |
Typ:
string optionalKod regionu, który jest używany do formatowania i filtrowania wyników. Nie ogranicza 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 domena 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: requested-region="string" |
unitSystem
attr: unit-system |
Układ jednostek używany do wyświetlania odległości. Jeśli nie zostanie określony, system jednostek jest określany przez parametr requestedRegion.
Atrybut HTML: unit-system="value-name" |
Przedziały | |
|---|---|
clear-icon |
Umieszcza element z gniazdem w pozycji ikony czyszczenia. Przycisk czyszczenia jest wyświetlany na końcu pola wejściowego, gdy znajduje się w nim tekst. |
input-icon |
Umieszcza element z gniazdem w pozycji ikony wejściowej. Ikona wejściowa wyświetla się na początku pola wejściowego w trybie inline. |
prediction-item-icon |
To miejsce akceptuje dokładnie 1 element <template>, który jest renderowany jako ikona wyświetlana obok elementu podpowiedzi. |
Części | |
|---|---|
focus-ring |
Element używany do wyświetlania pierścienia zaznaczenia wokół zaznaczonego elementu (elementu wejściowego lub podpowiedzi) |
input |
Element wejściowy elementu autouzupełniania. |
prediction-item |
Element w menu podpowiedzi, który reprezentuje pojedynczą podpowiedź. |
prediction-item-icon |
Ikona wyświetlana po lewej stronie każdego elementu na liście podpowiedzi. |
prediction-item-main-text |
Część elementu podpowiedzi, która jest głównym tekstem podpowiedzi. W przypadku położeń geograficznych zawiera nazwę miejsca, np. „Sydney”, lub nazwę ulicy i numer, np. „ul. Królewska 10”. Domyślnie element prediction-item-main-text jest czarny. Jeśli w elemencie prediction-item znajduje się dodatkowy tekst, jest on poza elementem prediction-item-main-text i dziedziczy styl z elementu prediction-item. Domyślnie jest szary. Dodatkowy tekst to zwykle adres. |
prediction-item-match |
Część zwróconej podpowiedzi, która pasuje do danych wpisanych przez użytkownika. Domyślnie dopasowany tekst jest pogrubiony. Zwróć uwagę, że dopasowany tekst jest wyróżniony tylko w elemencie prediction-item-main-text. |
prediction-item-nonmatch |
Część głównego tekstu podpowiedzi, która nie pasuje do danych wprowadzonych przez użytkownika. |
prediction-item-secondary-text |
Część elementu podpowiedzi, która jest dodatkowym tekstem podpowiedzi. Dodatkowy tekst to zwykle adres. |
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 tej części, jak i style części podpowiedzi. |
prediction-list |
Element wizualny zawierający listę podpowiedzi 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 |
Zastępuje czcionkę elementu. |
color-scheme |
Wskazuje, w jakim schemacie kolorów może być renderowany ten element. Więcej informacji znajdziesz w color-scheme dokumentacji. Domyślna wartość to color-scheme: light dark. |
font |
Zastępuje czcionkę elementu. |
font-family |
Zastępuje czcionkę elementu. |
font-size |
Zastępuje czcionkę elementu. |
font-style |
Zastępuje czcionkę elementu. |
font-weight |
Zastępuje czcionkę elementu. |
line-height |
Zastępuje czcionkę elementu. |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
gmp-error |
function(errorEvent)Argumenty:
To zdarzenie jest wywoływane, gdy żądanie do backendu zostało odrzucone (np. nieprawidłowy klucz interfejsu API). To zdarzenie nie jest przekazywane w górę. |
gmp-select |
function(placeSelectEvent)Argumenty:
To zdarzenie jest wywoływane, gdy użytkownik wybierze podpowiedź miejsca. Zawiera obiekt Place. |
Interfejs BasicPlaceAutocompleteElementOptions
interfejs
google.maps.places.BasicPlaceAutocompleteElementOptions
zaimplementowany przez BasicPlaceAutocompleteElement
Opcje tworzenia elementu BasicPlaceAutocompleteElement.
Właściwości | |
|---|---|
description
opcjonalne |
Typ:
string optionalOpis, który ma być używany w przypadku elementu wejściowego. Czytniki ekranu wykryją to, gdy element wejściowy będzie zaznaczony. |
disabled
opcjonalne |
Typ:
boolean optional |
futureOpeningBusinessesIncluded
opcjonalne |
Typ:
boolean optional |
includedPrimaryTypes
opcjonalne |
Typ:
Array<string> optional |
includedRegionCodes
opcjonalne |
Typ:
Array<string> optional |
internalUsageAttributionIds
opcjonalne |
Typ:
Iterable<string> optional |
locationBias
opcjonalne |
Typ:
LocationBias optional |
locationRestriction
opcjonalne |
Typ:
LocationRestriction optional |
maxlength
opcjonalne |
Typ:
number optional |
name
opcjonalne |
Typ:
string optional |
noClearButton
opcjonalne |
Typ:
boolean optional |
noInputIcon
opcjonalne |
Typ:
boolean optional |
origin
opcjonalne |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
placeholder
opcjonalne |
Typ:
string optional |
pureServiceAreaBusinessesIncluded
opcjonalne |
Typ:
boolean optional |
readonly
opcjonalne |
Typ:
boolean optional |
requestedLanguage
opcjonalne |
Typ:
string optional |
requestedRegion
opcjonalne |
Typ:
string optional |
unitSystem
opcjonalne |
Typ:
UnitSystem optional |
Klasa PlaceDetailsElement
class
google.maps.places.PlaceDetailsElement
extends HTMLElement
implements PlaceDetailsElementOptions
extended by AdvancedPlaceDetailsElement
library "places"
Wyświetla szczegóły miejsca w pełnym układzie. Dołącz PlaceDetailsPlaceRequestElement lub PlaceDetailsLocationRequestElement, aby określić miejsce, które ma zostać wyrenderowane. Dołącz , PlaceContentConfigElementPlaceStandardContentElement 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żywać tego elementu, włącz w projekcie w konsoli Google Cloud interfejs Places UI Kit API.
<gmp-place-details internal-usage-attribution-ids="space separated strings"> </gmp-place-details>
const {PlaceDetailsElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceDetailsElement |
PlaceDetailsElement([options])Parametry:
|
Właściwości | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS.
Atrybut HTML: internal-usage-attribution-ids="space separated strings" |
place
readonly |
Typ:
Place optionalTylko do odczytu. Obiekt miejsca zawierający identyfikator, lokalizację i widoczny obszar aktualnie 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 ujawniania informacji w Mapach Google. |
--gmp-mat-color-disabled-surface |
Kolor powierzchni, który ma wskazywać stan wyłączenia lub brak obecności. Używany w przypadku pustych gwiazdek opinii. |
--gmp-mat-color-info |
Kolor elementów interfejsu o charakterze informacyjnym. 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 stanie „Otwarte teraz”. |
--gmp-mat-color-neutral-container |
Kolor kontenera dla neutralnych wypełnionych elementów interfejsu. Używany w przypadku obiektów 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ą opublikowania opinii i plakietki z informacją o dostępności ładowarki EV, gdy jest ona niedostępna. |
--gmp-mat-color-on-positive-container |
Kolor tekstów 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 do tekstu i ikon na przycisku „Otwórz w Mapach”. |
--gmp-mat-color-on-surface |
Kolor tekstu i ikon na dowolnym kolorze powierzchni. Używany do zwykłego tekstu. |
--gmp-mat-color-on-surface-variant |
Kolor o mniejszym nacisku dla tekstu i ikon na dowolnym kolorze powierzchni. Używany w przypadku mniej wyróżnionego tekstu. |
--gmp-mat-color-outline-decorative |
Kolor konturu elementów nieinteraktywnych. Używany do obramowania elementu. |
--gmp-mat-color-positive |
Kolor elementów interfejsu o pozytywnym wydźwięku. Używany w tekście „Otwarte” w stanie „Otwarte teraz”. |
--gmp-mat-color-positive-container |
Kolor kontenera elementów interfejsu, które wywołują 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 w liczbie opinii, linkach w oknie ujawniania informacji w Mapach Google, linku do witryny, ikonach na karcie Przegląd oraz (po najechaniu kursorem / zaznaczeniu / kolorze tekstu) w tytułach na pasku kart. |
--gmp-mat-color-secondary-container |
Mniej widoczny kolor wypełnienia na powierzchni, przeznaczony do komponentów drugorzędnych, 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 oknie dialogowym ujawniania informacji w Mapach Google do wyświetlania adresu, oceny, typu, ceny, stanu otwarcia, godzin otwarcia, opinii, numeru telefonu, witryny, plus code, najważniejszych funkcji i tekstu. |
--gmp-mat-font-body-small |
Używany w treści listy funkcji na karcie „Informacje”. |
--gmp-mat-font-display-small |
Używane jako nazwa miejsca i tekst nagłówka każdej funkcji na karcie „Informacje”. |
--gmp-mat-font-family |
Podstawowa rodzina czcionek używana we wszystkich tekstach. |
--gmp-mat-font-headline-medium |
Używany jako tekst nagłówka w oknie ujawniania informacji w Mapach Google. |
--gmp-mat-font-label-large |
Używany w tytułach kart, przycisku „Otwórz w Mapach”, tekście informacji o pochodzeniu danych w galerii zdjęć, tekście informacji o pochodzeniu danych w sekcji opinii oraz linkach w oknie ujawniania informacji w Mapach Google. |
--gmp-mat-font-label-medium |
Używany w przypadku plakietki z liczbą zdjęć i plakietki z datą opublikowania opinii. |
--gmp-mat-font-title-small |
Używany jako tytuł każdej sekcji na karcie „Informacje”. |
--gmp-mat-spacing-extra-large |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-extra-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-large |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-medium |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-two-extra-large |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie 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że być renderowany 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 em. Domyślna wartość to 16px. |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
gmp-error |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy żądanie do backendu zostało odrzucone (np. nieprawidłowy klucz interfejsu API). To zdarzenie nie jest przekazywane w górę. |
gmp-load |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoją zawartość. To zdarzenie nie jest przekazywane w górę. |
PlaceDetailsElementOptions interface
interfejs
google.maps.places.PlaceDetailsElementOptions
rozszerzony przez: AdvancedPlaceDetailsElementOptions
implementowany przez: AdvancedPlaceDetailsElement, PlaceDetailsElement
Opcje dotyczące: PlaceDetailsElement.
Właściwości | |
|---|---|
internalUsageAttributionIds
opcjonalne |
Typ:
Iterable<string> optionalIdentyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS. |
Klasa PlaceDetailsCompactElement
class
google.maps.places.PlaceDetailsCompactElement
extends HTMLElement
implements PlaceDetailsCompactElementOptions
extended by AdvancedPlaceDetailsCompactElement
library "places"
Wyświetla szczegóły miejsca w kompaktowym układzie. Dodaj PlaceDetailsPlaceRequestElement lub PlaceDetailsLocationRequestElement, aby określić miejsce do wyrenderowania. Dołącz , PlaceContentConfigElementPlaceStandardContentElement 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żywać tego elementu, włącz w projekcie w konsoli Google Cloud interfejs Places UI Kit API.
<gmp-place-details-compact internal-usage-attribution-ids="space separated strings" orientation="value-name" truncation-preferred> </gmp-place-details-compact>
const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceDetailsCompactElement |
PlaceDetailsCompactElement([options])Parametry:
|
Właściwości | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS.
Atrybut HTML: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
Typ:
PlaceDetailsOrientation optionalDomyślnie:
PlaceDetailsOrientation.VERTICALWariant orientacji (pionowej lub poziomej) elementu.
Atrybut HTML: orientation="value-name" |
place
readonly |
Typ:
Place optionalTylko do odczytu. Obiekt miejsca zawierający identyfikator, lokalizację i widoczny obszar aktualnie renderowanego miejsca. |
truncationPreferred
attr: truncation-preferred |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanDomyślnie:
falseJeśli ma wartość „true”, nazwa i adres miejsca są skracane, aby zmieściły się w jednym wierszu, zamiast zawijania.
Atrybut HTML: truncation-preferred |
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 ujawniania informacji w Mapach Google. |
--gmp-mat-color-info |
Kolor elementów interfejsu o charakterze informacyjnym. 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 stanie „Otwarte teraz”. |
--gmp-mat-color-neutral-container |
Kolor kontenera dla neutralnych wypełnionych elementów interfejsu. Używane w obiektach zastępczych obrazów. |
--gmp-mat-color-on-secondary-container |
Kolor tekstu i ikon na tle dodatkowego koloru kontenera. Używany do tekstu i ikon na przycisku „Otwórz w Mapach”. |
--gmp-mat-color-on-surface |
Kolor tekstu i ikon na dowolnym kolorze powierzchni. Używany do zwykłego tekstu. |
--gmp-mat-color-on-surface-variant |
Kolor o mniejszym nacisku dla tekstu i ikon na dowolnym kolorze powierzchni. Używany w przypadku mniej wyróżnionego tekstu. |
--gmp-mat-color-outline-decorative |
Kolor konturu elementów nieinteraktywnych. Używany do obramowania elementu. |
--gmp-mat-color-positive |
Kolor elementów interfejsu o pozytywnym wydźwięku. Używany w tekście „Otwarte” w stanie „Otwarte teraz”. |
--gmp-mat-color-primary |
Kolor interaktywnego tekstu i ikon na tle koloru powierzchni. Używane do określania liczby opinii, a także linków w oknie z informacjami o Mapach Google. |
--gmp-mat-color-secondary-container |
Mniej widoczny kolor wypełnienia na powierzchni, przeznaczony do komponentów drugorzędnych, 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 ujawniania informacji w Mapach Google. |
--gmp-mat-font-body-small |
Służy do wyświetlania adresu, oceny, typu, ceny i stanu otwarcia miejsca. |
--gmp-mat-font-family |
Podstawowa rodzina czcionek używana we wszystkich tekstach. |
--gmp-mat-font-headline-medium |
Używany jako tekst nagłówka w oknie ujawniania 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 ujawniania informacji w Mapach Google i tekstu informacji o pochodzeniu danych w galerii zdjęć. |
--gmp-mat-font-label-medium |
Używane w przypadku plakietki z liczbą zdjęć. |
--gmp-mat-font-title-small |
Używana jako nazwa miejsca. |
--gmp-mat-spacing-extra-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-large |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-medium |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-star-rating-color |
Kolor wypełnionych gwiazdek w ocenie. |
--gmp-thumbnail-border-radius |
Promień obramowania miniatury zdjęcia 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że być renderowany 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 em. Domyślna wartość to 16px. |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
gmp-error |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy żądanie do backendu zostało odrzucone (np. nieprawidłowy klucz interfejsu API). To zdarzenie nie jest przekazywane w górę. |
gmp-load |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoją zawartość. To zdarzenie nie jest przekazywane w górę. |
Interfejs PlaceDetailsCompactElementOptions
interfejs
google.maps.places.PlaceDetailsCompactElementOptions
rozszerzony przez: AdvancedPlaceDetailsCompactElementOptions
implementowany przez: AdvancedPlaceDetailsCompactElement, PlaceDetailsCompactElement
Opcje dotyczące: PlaceDetailsCompactElement.
Właściwości | |
|---|---|
internalUsageAttributionIds
opcjonalne |
Typ:
Iterable<string> optionalIdentyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS. |
orientation
opcjonalne |
Typ:
PlaceDetailsOrientation optional |
truncationPreferred
opcjonalne |
Typ:
boolean optional |
AdvancedPlaceDetailsElement
class
google.maps.places.AdvancedPlaceDetailsElement
extends PlaceDetailsElement, HTMLElement
implements AdvancedPlaceDetailsElementOptions, PlaceDetailsElementOptions
library "places"
Wyświetla szczegóły miejsca w pełnym układzie. Dołącz PlaceDetailsPlaceRequestElement lub PlaceDetailsLocationRequestElement, aby określić miejsce, które ma zostać wyrenderowane. Dołącz elementy PlaceStandardContentElement, PlaceAllContentElement lub szczegóły miejsca, aby skonfigurować treść do renderowania.
Przykład:
<gmp-advanced-place-details>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-standard-content>
</gmp-place-standard-content>
</gmp-advanced-place-details> Aby używać tego elementu, włącz w projekcie w konsoli Google Cloud interfejs Places UI Kit API.
<gmp-advanced-place-details internal-usage-attribution-ids="space separated strings"> </gmp-advanced-place-details>
const {AdvancedPlaceDetailsElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
AdvancedPlaceDetailsElement |
AdvancedPlaceDetailsElement([options])Parametry:
|
Właściwości | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS.
Atrybut HTML: internal-usage-attribution-ids="space separated strings" |
place
readonly |
Typ:
Place optionalTylko do odczytu. Obiekt miejsca zawierający identyfikator, lokalizację i widoczny obszar aktualnie renderowanego miejsca. |
Przedziały | |
|---|---|
action-corner |
Przedział czasu dla: PlaceLinkElement i PlaceButtonElement. |
action-main |
Przedział czasu dla: PlaceLinkElement i PlaceButtonElement. |
|
Miejsce na niestandardową treść HTML renderowaną u dołu sekcji informacji podstawowych, bezpośrednio pod głównymi przyciskami poleceń. |
|
Miejsce na niestandardową treść HTML renderowaną w sekcji informacji podstawowych, bezpośrednio nad nazwą miejsca. |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
Dziedziczone:
gmp-error,
gmp-load
|
Interfejs AdvancedPlaceDetailsElementOptions
interfejs
google.maps.places.AdvancedPlaceDetailsElementOptions
rozszerza PlaceDetailsElementOptions
implementowany przez AdvancedPlaceDetailsElement
Opcje dotyczące: AdvancedPlaceDetailsElement.
Właściwości | |
|---|---|
internalUsageAttributionIds
opcjonalne |
Typ:
Iterable<string> optionalIdentyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS. |
Klasa AdvancedPlaceDetailsCompactElement
class
google.maps.places.AdvancedPlaceDetailsCompactElement
extends PlaceDetailsCompactElement, HTMLElement
implements AdvancedPlaceDetailsCompactElementOptions, PlaceDetailsCompactElementOptions
library "places"
Wyświetla szczegóły miejsca w kompaktowym układzie. Dodaj PlaceDetailsPlaceRequestElement lub PlaceDetailsLocationRequestElement, aby określić miejsce do wyrenderowania. Dołącz PlaceStandardContentElement, PlaceAllContentElement lub określ konkretne elementy podrzędne, aby skonfigurować renderowanie treści.
Aby używać tego elementu, włącz w projekcie w konsoli Google Cloud interfejs Places UI Kit API.
<gmp-advanced-place-details-compact internal-usage-attribution-ids="space separated strings"> </gmp-advanced-place-details-compact>
const {AdvancedPlaceDetailsCompactElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
AdvancedPlaceDetailsCompactElement |
AdvancedPlaceDetailsCompactElement([options])Parametry:
|
Właściwości | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS.
Atrybut HTML: internal-usage-attribution-ids="space separated strings" |
place
readonly |
Typ:
Place optionalTylko do odczytu. Obiekt miejsca zawierający identyfikator, lokalizację i widoczny obszar aktualnie renderowanego miejsca. |
Dziedziczone:
orientation (atrybut: orientation),
truncationPreferred (atrybut: truncation-preferred)
| |
Przedziały | |
|---|---|
action-corner |
Przedział czasu dla: PlaceLinkElement i PlaceButtonElement. |
action-main |
Przedział czasu dla: PlaceLinkElement i PlaceButtonElement. |
|
Miejsce na niestandardową treść HTML renderowaną u dołu sekcji informacji podstawowych, bezpośrednio pod głównymi przyciskami poleceń. |
|
Miejsce na niestandardową treść HTML renderowaną w sekcji informacji podstawowych, bezpośrednio nad nazwą miejsca. |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
Dziedziczone:
gmp-error,
gmp-load
|
Interfejs AdvancedPlaceDetailsCompactElementOptions
interfejs
google.maps.places.AdvancedPlaceDetailsCompactElementOptions
rozszerza PlaceDetailsCompactElementOptions
implementowany przez AdvancedPlaceDetailsCompactElement
Opcje dotyczące: AdvancedPlaceDetailsCompactElement.
Właściwości | |
|---|---|
internalUsageAttributionIds
opcjonalne |
Typ:
Iterable<string> optionalIdentyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS. |
Dziedziczone:
orientation,
truncationPreferred
| |
Stałe PlaceDetailsOrientation
stałe
google.maps.places.PlaceDetailsOrientation
biblioteka "places"
Warianty orientacji dla: PlaceDetailsCompactElement.
Te stałe mogą być też używane jako ciągi znaków. W języku TypeScript literały ciągów znaków są definiowane przez typ PlaceDetailsOrientationString.
const {PlaceDetailsOrientation} = await google.maps.importLibrary("places");
Stałe | |
|---|---|
HORIZONTAL |
Orientacja pozioma. |
VERTICAL |
Orientacja pionowa. |
PlaceDetailsPlaceRequestElement
class
google.maps.places.PlaceDetailsPlaceRequestElement
extends HTMLElement
implements PlaceDetailsPlaceRequestElementOptions
library "places"
Konfiguruje PlaceDetailsCompactElement lub PlaceDetailsElement, aby wczytywać dane na podstawie obiektu miejsca, identyfikatora lub nazwy zasobu. Dołącz ten element jako element podrzędny elementu PlaceDetailsCompactElement lub PlaceDetailsElement, aby wczytać dane dla 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> <gmp-place-details-place-request place="places/###"> </gmp-place-details-place-request>
const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceDetailsPlaceRequestElement |
PlaceDetailsPlaceRequestElement([options])Parametry:
|
Właściwości | |
|---|---|
place
attr: place |
Domyślnie:
nullObiekt, identyfikator lub nazwa zasobu miejsca, którego informacje o miejscu mają być wyświetlane w kompaktowym elemencie Szczegóły miejsca. Ta właściwość odzwierciedla atrybut jako nazwę zasobu.
Atrybut HTML: place="places/###" |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
PlaceDetailsPlaceRequestElementOptions interface
interfejs
google.maps.places.PlaceDetailsPlaceRequestElementOptions
zaimplementowany przez PlaceDetailsPlaceRequestElement
Opcje dotyczące: PlaceDetailsPlaceRequestElement.
Właściwości | |
|---|---|
place
opcjonalne |
Typ:
Place|string optional |
Klasa PlaceDetailsLocationRequestElement
class
google.maps.places.PlaceDetailsLocationRequestElement
extends HTMLElement
implements PlaceDetailsLocationRequestElementOptions
library "places"
Konfiguruje komponent PlaceDetailsCompactElement lub PlaceDetailsElement, aby wczytywał dane na podstawie lokalizacji. Dołącz ten element jako element podrzędny elementu PlaceDetailsCompactElement lub PlaceDetailsElement, aby wczytać dane dla 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> <gmp-place-details-location-request location="lat,lng"> </gmp-place-details-location-request>
const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceDetailsLocationRequestElement |
PlaceDetailsLocationRequestElement([options])Parametry:
|
Właściwości | |
|---|---|
location
attr: location |
Typ danych wejściowych:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalTyp danych wyjściowych: LatLngAltitude optionalDomyślnie:
nullLokalizacja, dla której mają być wyświetlane informacje o miejscu w elemencie Szczegóły miejsca. Normalizuje do
LatLngAltitude.Atrybut HTML: location="lat,lng" |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Interfejs PlaceDetailsLocationRequestElementOptions
interfejs
google.maps.places.PlaceDetailsLocationRequestElementOptions
zaimplementowany przez PlaceDetailsLocationRequestElement
Opcje dotyczące: PlaceDetailsLocationRequestElement.
Właściwości | |
|---|---|
location
opcjonalne |
Typ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalLokalizacja, dla której ma zostać wyrenderowane miejsce. |
PlaceSearchElement
class
google.maps.places.PlaceSearchElement
extends HTMLElement
implements PlaceSearchElementOptions
extended by AdvancedPlaceSearchElement
library "places"
Wyświetla wyniki wyszukiwania miejsc na liście. Dołącz PlaceTextSearchRequestElement lub PlaceNearbySearchRequestElement, aby określić żądanie, dla którego mają zostać wyrenderowane wyniki. Dołącz , PlaceContentConfigElementPlaceStandardContentElement 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 miejsc, włącz w projekcie w konsoli Google Cloud interfejs Places UI Kit API.
<gmp-place-search attribution-position="value-name" internal-usage-attribution-ids="space separated strings" orientation="value-name" selectable truncation-preferred> </gmp-place-search>
const {PlaceSearchElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceSearchElement |
PlaceSearchElement([options])Parametry:
|
Właściwości | |
|---|---|
attributionPosition
attr: attribution-position |
Typ danych wejściowych:
PlaceSearchAttributionPosition optionalTyp danych wyjściowych: PlaceSearchAttributionPositionDomyślnie:
PlaceSearchAttributionPosition.TOPPozycja logo atrybucji i przycisku ujawnienia informacji.
Atrybut HTML: attribution-position="value-name" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS.
Atrybut HTML: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
Typ danych wejściowych:
PlaceSearchOrientation optionalTyp danych wyjściowych: PlaceSearchOrientationDomyślnie:
PlaceSearchOrientation.VERTICALWariant orientacji (pionowej lub poziomej) elementu.
Atrybut HTML: orientation="value-name" |
places
readonly |
Tylko do odczytu. Tablica obiektów Place zawierających identyfikatory, lokalizacje i widoczne obszary obecnie renderowanych miejsc. |
selectable
attr: selectable |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanDomyślnie:
falseOkreśla, 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ż nawigacja i wybór za pomocą klawiatury.Atrybut HTML: selectable |
truncationPreferred
attr: truncation-preferred |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanDomyślnie:
falseJeśli ma wartość true (prawda), skraca niektóre wiersze treści, aby zmieściły się w jednym wierszu, zamiast je zawijać.
Atrybut HTML: truncation-preferred |
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 o charakterze informacyjnym. Używana w przypadku ikony wejścia dostępnego dla osób niepełnosprawnych. |
--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 do plakietek z datą opinii i kształtów obiektów zastępczych podczas wczytywania. |
--gmp-mat-color-on-neutral-container |
Kolor tekstu i ikon w neutralnym kontenerze. Służy do wyświetlania tekstu daty opinii i tekstu błędu wczytywania. |
--gmp-mat-color-on-secondary-container |
Kolor tekstu i ikon na tle koloru kontenera dodatkowego. Używany do tekstu i ikon przycisków. |
--gmp-mat-color-on-surface |
Kolor tekstu i ikon na tle koloru powierzchni. Używany w nagłówkach i treściach okien. |
--gmp-mat-color-on-surface-variant |
Kolor o mniejszym nacisku dla tekstu i ikon na tle koloru powierzchni. Używany do informacji o miejscu. |
--gmp-mat-color-outline-decorative |
Kolor konturu elementów nieinteraktywnych. Używany do 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 linkach, wskaźniku ładowania i ikonach przeglądu. |
--gmp-mat-color-secondary-container |
Mniej widoczny kolor wypełnienia na powierzchni. Używany w tle przycisków. |
--gmp-mat-color-surface |
Kolor tła. Używany jako tło kontenerów i okien. |
--gmp-mat-font-body-small |
Używany do informacji o miejscu. |
--gmp-mat-font-family |
Podstawowa rodzina czcionek dla całego tekstu. |
--gmp-mat-font-headline-medium |
Służy do nagłówków okien. |
--gmp-mat-font-label-large |
Służy do określania treści przycisku. |
--gmp-mat-font-title-medium |
Używana jako nazwa miejsca. |
--gmp-mat-spacing-extra-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-large |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-medium |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-star-rating-color |
Kolor wypełnionych gwiazdek w ocenie w gwiazdkach. |
--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że być renderowany 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 | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
gmp-error |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy żądanie do backendu zostało odrzucone (np. nieprawidłowy klucz interfejsu API). To zdarzenie nie jest przekazywane w górę. |
gmp-load |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoją zawartość. To zdarzenie nie jest przekazywane w górę. |
gmp-select |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy miejsce zostanie wybrane z listy. Zawiera obiekt Place z identyfikatorem, lokalizacją i obszarem roboczym wybranego miejsca. |
PlaceSearchElementOptions
interfejs
google.maps.places.PlaceSearchElementOptions
rozszerzony przez: AdvancedPlaceSearchElementOptions
implementowany przez: AdvancedPlaceSearchElement, PlaceSearchElement
Opcje dotyczące: PlaceSearchElement.
Właściwości | |
|---|---|
attributionPosition
opcjonalne |
Typ:
PlaceSearchAttributionPosition optional |
internalUsageAttributionIds
opcjonalne |
Typ:
Iterable<string> optionalIdentyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS. |
orientation
opcjonalne |
Typ:
PlaceSearchOrientation optionalZobacz PlaceSearchElement.orientation. |
selectable
opcjonalne |
Typ:
boolean optionalZobacz: PlaceSearchElement.selectable |
truncationPreferred
opcjonalne |
Typ:
boolean optional |
Klasa PlaceItemElement
class
google.maps.places.PlaceItemElement
extends HTMLElement
implements PlaceItemElementOptions
extended by AdvancedPlaceItemElement
library "places"
Publiczny komponent internetowy (<gmp-place-item>) dla elementów listy miejsc. Element niestandardowy <gmp-place-item> renderuje kartę wyniku pojedynczego miejsca w komponencie <gmp-place-search>. Każdy element <gmp-place-item> wyświetla informacje o miejscu składające się z podrzędnych komponentów wizualnych z pakietu Places UI Kit.
<gmp-place-item></gmp-place-item>
const {PlaceItemElement} = await google.maps.importLibrary("places");
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
PlaceItemElementOptions interface
interfejs
google.maps.places.PlaceItemElementOptions
rozszerzony przez: AdvancedPlaceItemElementOptions
implementowany przez: AdvancedPlaceItemElement, PlaceItemElement
Opcje dotyczące: PlaceItemElement.
Klasa AdvancedPlaceSearchElement
class
google.maps.places.AdvancedPlaceSearchElement
extends PlaceSearchElement, HTMLElement
implements AdvancedPlaceSearchElementOptions, PlaceSearchElementOptions
library "places"
Wyświetla wyniki zaawansowanego wyszukiwania miejsc na liście. Dołącz PlaceTextSearchRequestElement lub PlaceNearbySearchRequestElement, aby określić żądanie, dla którego mają zostać wyrenderowane wyniki. Dołącz PlaceStandardContentElement, PlaceAllContentElement lub <template slot="details-item">, aby określić, które treści mają być renderowane.
Przykład:
<gmp-advanced-place-search>
<gmp-place-text-search-request
text-query="QUERY"
></gmp-place-text-search-request>
<template slot="details-item">
<gmp-place-media lightbox-preferred></gmp-place-media>
</template>
</gmp-advanced-place-search> Aby używać elementu zaawansowanego wyszukiwania miejsc, włącz w projekcie w konsoli Google Cloud interfejs Places UI Kit API.
<gmp-advanced-place-search attribution-position="value-name" internal-usage-attribution-ids="space separated strings" orientation="value-name" selectable truncation-preferred> </gmp-advanced-place-search>
const {AdvancedPlaceSearchElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
AdvancedPlaceSearchElement |
AdvancedPlaceSearchElement([options])Parametry:
|
Właściwości | |
|---|---|
attributionPosition
attr: attribution-position |
Typ danych wejściowych:
PlaceSearchAttributionPosition optionalTyp danych wyjściowych: PlaceSearchAttributionPositionDomyślnie:
PlaceSearchAttributionPosition.TOPPozycja logo atrybucji i przycisku ujawnienia informacji.
Atrybut HTML: attribution-position="value-name" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS.
Atrybut HTML: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
Typ danych wejściowych:
PlaceSearchOrientation optionalTyp danych wyjściowych: PlaceSearchOrientationDomyślnie:
PlaceSearchOrientation.VERTICALWariant orientacji (pionowej lub poziomej) elementu.
Atrybut HTML: orientation="value-name" |
selectable
attr: selectable |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanDomyślnie:
falseOkreśla, 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ż nawigacja i wybór za pomocą klawiatury.Atrybut HTML: selectable |
truncationPreferred
attr: truncation-preferred |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanDomyślnie:
falseJeśli ma wartość true (prawda), skraca niektóre wiersze treści, aby zmieściły się w jednym wierszu, zamiast je zawijać.
Atrybut HTML: truncation-preferred |
Dziedziczone:
places
| |
Przedziały | |
|---|---|
details-item |
Szablon HTML zawierający widżety miejsc GMP do renderowania dla każdego miejsca w wynikach wyszukiwania. |
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 o charakterze informacyjnym. Używana w przypadku ikony wejścia dostępnego dla osób niepełnosprawnych. |
--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 do plakietek z datą opinii i kształtów obiektów zastępczych podczas wczytywania. |
--gmp-mat-color-on-neutral-container |
Kolor tekstu i ikon w neutralnym kontenerze. Służy do wyświetlania tekstu daty opinii i tekstu błędu wczytywania. |
--gmp-mat-color-on-secondary-container |
Kolor tekstu i ikon na tle koloru kontenera dodatkowego. Używany do tekstu i ikon przycisków. |
--gmp-mat-color-on-surface |
Kolor tekstu i ikon na tle koloru powierzchni. Używany w nagłówkach i treściach okien. |
--gmp-mat-color-on-surface-variant |
Kolor o mniejszym nacisku dla tekstu i ikon na tle koloru powierzchni. Używany do informacji o miejscu. |
--gmp-mat-color-outline-decorative |
Kolor konturu elementów nieinteraktywnych. Używany do 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 linkach, wskaźniku ładowania i ikonach przeglądu. |
--gmp-mat-color-secondary-container |
Mniej widoczny kolor wypełnienia na powierzchni. Używany w tle przycisków. |
--gmp-mat-color-surface |
Kolor tła. Używany jako tło kontenerów i okien. |
--gmp-mat-font-body-small |
Używany do informacji o miejscu. |
--gmp-mat-font-family |
Podstawowa rodzina czcionek dla całego tekstu. |
--gmp-mat-font-headline-medium |
Służy do nagłówków okien. |
--gmp-mat-font-label-large |
Służy do określania treści przycisku. |
--gmp-mat-font-title-medium |
Używana jako nazwa miejsca. |
--gmp-mat-spacing-extra-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-large |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-medium |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-star-rating-color |
Kolor wypełnionych gwiazdek w ocenie w gwiazdkach. |
--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że być renderowany 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 | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
gmp-error |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy żądanie do backendu zostało odrzucone (np. nieprawidłowy klucz interfejsu API). To zdarzenie nie jest przekazywane w górę. |
gmp-load |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoją zawartość. To zdarzenie nie jest przekazywane w górę. |
gmp-select |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy miejsce zostanie wybrane z listy. Zawiera obiekt Place z identyfikatorem, lokalizacją i obszarem roboczym wybranego miejsca. |
Interfejs AdvancedPlaceSearchElementOptions
interfejs
google.maps.places.AdvancedPlaceSearchElementOptions
rozszerza PlaceSearchElementOptions
implementowany przez AdvancedPlaceSearchElement
Opcje dotyczące: AdvancedPlaceSearchElement.
Właściwości | |
|---|---|
attributionPosition
opcjonalne |
Typ:
PlaceSearchAttributionPosition optional |
internalUsageAttributionIds
opcjonalne |
Typ:
Iterable<string> optionalIdentyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS. |
orientation
opcjonalne |
Typ:
PlaceSearchOrientation optionalZobacz PlaceSearchElement.orientation. |
selectable
opcjonalne |
Typ:
boolean optionalZobacz: PlaceSearchElement.selectable |
truncationPreferred
opcjonalne |
Typ:
boolean optional |
AdvancedPlaceListElement
class
google.maps.places.AdvancedPlaceListElement
extends HTMLElement
implements AdvancedPlaceListElementOptions
library "places"
Wyświetla wyniki wyszukiwania miejsc na liście. Dołącz co najmniej 1 element PlaceDetailsPlaceRequestElement lub ustaw właściwość places, aby określić miejsca do wyświetlenia. Dodaj PlaceStandardContentElement lub PlaceAllContentElement, aby określić, które treści mają być renderowane.
Przykład:
<gmp-advanced-place-list>
<gmp-place-details-place-request
place="PLACE_ID"
</gmp-place-details-place-request>
<template slot="details-item">
<gmp-place-media lightbox-preferred></gmp-place-media>
</template>
</gmp-advanced-place-list> Aby używać zaawansowanego elementu listy miejsc, włącz w projekcie w konsoli Google Cloud interfejs Places UI Kit API.
<gmp-advanced-place-list attribution-position="value-name" internal-usage-attribution-ids="space separated strings" orientation="value-name" places="space separated strings" selectable truncation-preferred> </gmp-advanced-place-list>
const {AdvancedPlaceListElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
AdvancedPlaceListElement |
AdvancedPlaceListElement([options])Parametry:
|
Właściwości | |
|---|---|
attributionPosition
attr: attribution-position |
Typ danych wejściowych:
PlaceSearchAttributionPosition optionalTyp danych wyjściowych: PlaceSearchAttributionPositionDomyślnie:
PlaceSearchAttributionPosition.TOPPozycja logo atrybucji i przycisku ujawnienia informacji.
Atrybut HTML: attribution-position="value-name" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS.
Atrybut HTML: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
Typ danych wejściowych:
PlaceSearchOrientation optionalTyp danych wyjściowych: PlaceSearchOrientationDomyślnie:
PlaceSearchOrientation.VERTICALWariant orientacji (pionowej lub poziomej) elementu.
Atrybut HTML: orientation="value-name" |
places
attr: places |
Lista obiektów Place zawierających identyfikatory, które powinny być wyświetlane w tym elemencie. Pamiętaj, że nie wszystkie miejsca ustawione we właściwości places mogą być wyświetlane, jeśli nie można ich wyrenderować(np. nieprawidłowy identyfikator, błąd żądania sieciowego itp.). Właściwość places można odczytać, aby pobrać aktualnie wyświetlane miejsca.
Atrybut HTML: places="space separated strings" |
selectable
attr: selectable |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanDomyślnie:
falseOkreśla, 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ż nawigacja i wybór za pomocą klawiatury.Atrybut HTML: selectable |
truncationPreferred
attr: truncation-preferred |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanDomyślnie:
falseJeśli ma wartość true (prawda), skraca niektóre wiersze treści, aby zmieściły się w jednym wierszu, zamiast je zawijać.
Atrybut HTML: truncation-preferred |
Przedziały | |
|---|---|
details-item |
Szablon HTML zawierający widżety miejsc gmp-place do renderowania dla każdego miejsca na liście. |
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 o charakterze informacyjnym. Używana w przypadku ikony wejścia dostępnego dla osób niepełnosprawnych. |
--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 do plakietek z datą opinii i kształtów obiektów zastępczych podczas wczytywania. |
--gmp-mat-color-on-neutral-container |
Kolor tekstu i ikon w neutralnym kontenerze. Służy do wyświetlania tekstu daty opinii i tekstu błędu wczytywania. |
--gmp-mat-color-on-secondary-container |
Kolor tekstu i ikon na tle koloru kontenera dodatkowego. Używany do tekstu i ikon przycisków. |
--gmp-mat-color-on-surface |
Kolor tekstu i ikon na tle koloru powierzchni. Używany w nagłówkach i treściach okien. |
--gmp-mat-color-on-surface-variant |
Kolor o mniejszym nacisku dla tekstu i ikon na tle koloru powierzchni. Używany do informacji o miejscu. |
--gmp-mat-color-outline-decorative |
Kolor konturu elementów nieinteraktywnych. Używany do 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 linkach, wskaźniku ładowania i ikonach przeglądu. |
--gmp-mat-color-secondary-container |
Mniej widoczny kolor wypełnienia na powierzchni. Używany w tle przycisków. |
--gmp-mat-color-surface |
Kolor tła. Używany jako tło kontenerów i okien. |
--gmp-mat-font-body-small |
Używany do informacji o miejscu. |
--gmp-mat-font-family |
Podstawowa rodzina czcionek dla całego tekstu. |
--gmp-mat-font-headline-medium |
Służy do nagłówków okien. |
--gmp-mat-font-label-large |
Służy do określania treści przycisku. |
--gmp-mat-font-title-medium |
Używana jako nazwa miejsca. |
--gmp-mat-spacing-extra-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-large |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-medium |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-mat-spacing-small |
Służy do określania odstępów wewnątrz elementu, takich jak margines i dopełnienie wokół tekstu. |
--gmp-star-rating-color |
Kolor wypełnionych gwiazdek w ocenie w gwiazdkach. |
--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że być renderowany 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 | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
gmp-error |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy żądanie do backendu zostało odrzucone (np. nieprawidłowy klucz interfejsu API). To zdarzenie nie jest przekazywane w górę. |
gmp-load |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy element wczytuje i renderuje swoją zawartość. To zdarzenie nie jest przekazywane w górę. |
gmp-select |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy miejsce zostanie wybrane z listy. Zawiera obiekt Place z identyfikatorem, lokalizacją i obszarem roboczym wybranego miejsca. |
AdvancedPlaceListElementOptions interface
interfejs
google.maps.places.AdvancedPlaceListElementOptions
zaimplementowany przez AdvancedPlaceListElement
Opcje dotyczące: AdvancedPlaceListElement.
Właściwości | |
|---|---|
attributionPosition
opcjonalne |
Typ:
PlaceSearchAttributionPosition optional |
internalUsageAttributionIds
opcjonalne |
Typ:
Iterable<string> optionalIdentyfikatory używane do przypisywania wywołań do konkretnych pakietów lub bibliotek OSS. |
orientation
opcjonalne |
Typ:
PlaceSearchOrientation optionalZobacz PlaceSearchElement.orientation. |
places
opcjonalne |
Zobacz AdvancedPlaceListElement.places. |
selectable
opcjonalne |
Typ:
boolean optionalZobacz: PlaceSearchElement.selectable |
truncationPreferred
opcjonalne |
Typ:
boolean optional |
AdvancedPlaceItemElement
class
google.maps.places.AdvancedPlaceItemElement
extends PlaceItemElement, HTMLElement
implements AdvancedPlaceItemElementOptions, PlaceItemElementOptions
library "places"
Publiczny komponent internetowy (<gmp-advanced-place-item>) dla zaawansowanych elementów listy miejsc. Element niestandardowy <gmp-advanced-place-item> renderuje pojedynczą kartę wyniku z bogatymi informacjami o miejscu w kontenerze wyszukiwania zaawansowanego lub kolekcji, takim jak <gmp-advanced-place-search> lub <gmp-advanced-place-list>. Każdy komponent <gmp-advanced-place-item> zawiera szczegółowe informacje o miejscu, kolaże multimedialne, podsumowania redakcyjne i interaktywne przyciski polecenia składające się z podrzędnych komponentów wizualnych z interfejsu Places UI Kit.
<gmp-advanced-place-item></gmp-advanced-place-item>
const {AdvancedPlaceItemElement} = await google.maps.importLibrary("places");
Przedziały | |
|---|---|
|
Miejsce na niestandardową treść HTML renderowaną u dołu sekcji informacji podstawowych, bezpośrednio pod głównymi przyciskami poleceń. |
|
Miejsce na niestandardową treść HTML renderowaną w sekcji informacji podstawowych, bezpośrednio nad nazwą miejsca. |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Interfejs AdvancedPlaceItemElementOptions
interfejs
google.maps.places.AdvancedPlaceItemElementOptions
rozszerza PlaceItemElementOptions
implementowany przez AdvancedPlaceItemElement
Opcje dotyczące: AdvancedPlaceItemElement.
PlaceSearchAttributionPosition constants
stałe
google.maps.places.PlaceSearchAttributionPosition
biblioteka "places"
Pozycje atrybucji dla: PlaceSearchElement.
Te stałe mogą być też używane jako ciągi znaków. W języku TypeScript literały ciągów znaków są definiowane przez typ PlaceSearchAttributionPositionString.
const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places");
Stałe | |
|---|---|
BOTTOM |
Atrybucja u dołu elementu PlaceSearchElement |
TOP |
Atrybucja u góry elementu PlaceSearchElement |
PlaceSearchOrientation – stałe
stałe
google.maps.places.PlaceSearchOrientation
biblioteka "places"
Warianty orientacji dla: PlaceSearchElement.
Te stałe mogą być też używane jako ciągi znaków. W języku TypeScript literały ciągów znaków są definiowane przez typ PlaceSearchOrientationString.
const {PlaceSearchOrientation} = await google.maps.importLibrary("places");
Stałe | |
|---|---|
HORIZONTAL |
Orientacja pozioma. |
VERTICAL |
Orientacja pionowa. |
Klasa PlaceSelectEvent
class
google.maps.places.PlaceSelectEvent
extends Event
library "places"
To zdarzenie jest wywoływane, gdy użytkownik wybierze miejsce z listy miejsc. Aby uzyskać dostęp do wyboru, naciśnij event.place.
const {PlaceSelectEvent} = await google.maps.importLibrary("places");
Właściwości | |
|---|---|
place
readonly |
Typ:
Placewybrane miejsce, |
Klasa PlaceNearbySearchRequestElement
class
google.maps.places.PlaceNearbySearchRequestElement
extends HTMLElement
implements PlaceNearbySearchRequestElementOptions
library "places"
Konfiguruje PlaceSearchElement, aby wczytywać wyniki na podstawie żądania wyszukiwania w pobliżu. Właściwość locationRestriction jest wymagana do wczytania elementu wyszukiwania. Jeśli właściwość locationRestriction nie jest ustawiona, wszystkie inne skonfigurowane właściwości zostaną zignorowane. Aby wczytać wyniki, dołącz ten element jako element podrzędny elementu PlaceSearchElement. 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> <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="value-name"> </gmp-place-nearby-search-request>
const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceNearbySearchRequestElement |
PlaceNearbySearchRequestElement([options])Parametry:
|
Właściwości | |
|---|---|
excludedPrimaryTypes
attr: excluded-primary-types |
Domyślnie:
nullWykluczone typy miejsc głównych.
Atrybut HTML: excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." |
excludedTypes
attr: excluded-types |
Domyślnie:
nullWykluczone typy miejsc.
Atrybut HTML: excluded-types="excluded-type1 excluded-type2..." |
futureOpeningBusinessesIncluded |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: boolean optionalUwzględnij podpowiedzi miejsc dla firm, które nie są jeszcze otwarte, ale mają zostać otwarte w przyszłości. |
includedPrimaryTypes
attr: included-primary-types |
Domyślnie:
nullUwzględniony główny typ miejsca.
Atrybut HTML: included-primary-types="included-primary-type1 included-primary-type2..." |
includedTypes
attr: included-types |
Domyślnie:
nullUwzględniony typ miejsca.
Atrybut HTML: included-types="included-type1 included-type2..." |
locationRestriction
attr: location-restriction |
Domyślnie:
nullRegion, w którym ma zostać przeprowadzone wyszukiwanie. Normalizuje do
Circle.Atrybut HTML: location-restriction="radius@lat,lng" |
maxResultCount
attr: max-result-count |
Typ danych wejściowych:
number optionalTyp danych wyjściowych: number optionalDomyślnie:
nullMaksymalna liczba wyników do zwrócenia.
Atrybut HTML: max-result-count="number" |
rankPreference
attr: rank-preference |
Typ danych wejściowych:
SearchNearbyRankPreference optionalTyp danych wyjściowych: SearchNearbyRankPreference optionalDomyślnie:
nullSposób, w jaki wyniki będą klasyfikowane w odpowiedzi.
Atrybut HTML: rank-preference="value-name" |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
PlaceNearbySearchRequestElementOptions interface
interfejs
google.maps.places.PlaceNearbySearchRequestElementOptions
zaimplementowany przez PlaceNearbySearchRequestElement
Opcje dotyczące: PlaceNearbySearchRequestElement.
Właściwości | |
|---|---|
excludedPrimaryTypes
opcjonalne |
Typ:
Array<string> optionalWykluczone typy miejsc głównych. Więcej informacji znajdziesz w PlaceNearbySearchRequestElement.excludedPrimaryTypes i SearchNearbyRequest.excludedPrimaryTypes. |
excludedTypes
opcjonalne |
Typ:
Array<string> optionalWykluczone typy miejsc. Więcej informacji znajdziesz w PlaceNearbySearchRequestElement.excludedTypes i SearchNearbyRequest.excludedTypes. |
futureOpeningBusinessesIncluded
opcjonalne |
Typ:
boolean optionalUwzględnij podpowiedzi miejsc dla firm, które nie są jeszcze otwarte, ale mają zostać otwarte w przyszłości. |
includedPrimaryTypes
opcjonalne |
Typ:
Array<string> optionalUwzględnione typy miejsc głównych. Więcej informacji znajdziesz w PlaceNearbySearchRequestElement.includedPrimaryTypes i SearchNearbyRequest.includedPrimaryTypes. |
includedTypes
opcjonalne |
Typ:
Array<string> optionalUwzględnione typy miejsc. Więcej informacji znajdziesz w PlaceNearbySearchRequestElement.includedTypes i SearchNearbyRequest.includedTypes. |
locationRestriction
opcjonalne |
Typ:
Circle|CircleLiteral optionalRegion, w którym ma zostać przeprowadzone wyszukiwanie. Więcej informacji znajdziesz w PlaceNearbySearchRequestElement.locationRestriction i SearchNearbyRequest.locationRestriction. |
maxResultCount
opcjonalne |
Typ:
number optionalMaksymalna liczba wyników do zwrócenia. Więcej informacji znajdziesz w PlaceNearbySearchRequestElement.maxResultCount i SearchNearbyRequest.maxResultCount. |
rankPreference
opcjonalne |
Typ:
SearchNearbyRankPreference optionalSposób, w jaki wyniki będą klasyfikowane w odpowiedzi. Więcej informacji znajdziesz w PlaceNearbySearchRequestElement.rankPreference i SearchNearbyRankPreference. |
PlaceTextSearchRequestElement class
class
google.maps.places.PlaceTextSearchRequestElement
extends HTMLElement
implements PlaceTextSearchRequestElementOptions
library "places"
Konfiguruje PlaceSearchElement, aby wczytywać wyniki na podstawie żądania wyszukiwania tekstu. Właściwość textQuery jest wymagana do wczytania elementu wyszukiwania. Jeśli właściwość textQuery nie jest ustawiona, wszystkie inne skonfigurowane właściwości zostaną zignorowane. Aby wczytać wyniki, dołącz ten element jako element podrzędny elementu PlaceSearchElement. 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> <gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..." ev-minimum-charging-rate-kw="number" included-type="type" is-open-now location-bias="lat,lng" location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="value-name" text-query="string" use-strict-type-filtering> </gmp-place-text-search-request>
const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceTextSearchRequestElement |
PlaceTextSearchRequestElement([options])Parametry:
|
Właściwości | |
|---|---|
evConnectorTypes
attr: ev-connector-types |
Typ danych wejściowych:
Array<EVConnectorType> optionalTyp danych wyjściowych: Array<EVConnectorType> optionalDomyślnie:
nullLista preferowanych typów złączy EV.
Atrybut HTML: ev-connector-types="ev-connector-type1 ev-connector-type2..." |
evMinimumChargingRateKw
attr: ev-minimum-charging-rate-kw |
Typ danych wejściowych:
number optionalTyp danych wyjściowych: number optionalDomyślnie:
nullMinimalna wymagana moc ładowania w kilowatach.
Atrybut HTML: ev-minimum-charging-rate-kw="number" |
futureOpeningBusinessesIncluded |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: boolean optionalUwzględnij podpowiedzi miejsc dla firm, które nie są jeszcze otwarte, ale mają zostać otwarte w przyszłości. |
includedType
attr: included-type |
Typ danych wejściowych:
string optionalTyp danych wyjściowych: string optionalDomyślnie:
nullŻądany typ miejsca.
Atrybut HTML: included-type="type" |
isOpenNow
attr: is-open-now |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: boolean optionalDomyślnie:
nullSłuży do ograniczania wyszukiwania do miejsc, które są obecnie otwarte.
Atrybut HTML: is-open-now |
locationBias
attr: location-bias |
Typ danych wejściowych:
LocationBias optionalTyp danych wyjściowych: LatLngAltitude|LatLngBounds|Circle|string optionalDomyślnie:
nullUstawienie lokalizacji na potrzeby wyszukiwania.
Atrybut HTML:
|
locationRestriction
attr: location-restriction |
Typ danych wejściowych:
LatLngBounds|LatLngBoundsLiteral optionalTyp danych wyjściowych: LatLngBounds optionalDomyślnie:
nullOgraniczenie lokalizacji wyszukiwania. Normalizuje do
LatLngBounds.Atrybut HTML: location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng" |
maxResultCount
attr: max-result-count |
Typ danych wejściowych:
number optionalTyp danych wyjściowych: number optionalDomyślnie:
nullMaksymalna liczba wyników do zwrócenia.
Atrybut HTML: max-result-count="number" |
minRating
attr: min-rating |
Typ danych wejściowych:
number optionalTyp danych wyjściowych: number optionalDomyślnie:
nullOdfiltruj wyniki, których średnia ocena użytkowników jest niższa niż ten limit.
Atrybut HTML: min-rating="number" |
priceLevels
attr: price-levels |
Typ danych wejściowych:
Array<PriceLevel> optionalTyp danych wyjściowych: Array<PriceLevel> optionalDomyślnie:
nullSłuży do ograniczania wyszukiwania do miejsc oznaczonych określonymi poziomami cen.
Atrybut HTML: price-levels="price-level1 price-level2..." |
rankPreference
attr: rank-preference |
Typ danych wejściowych:
SearchByTextRankPreference optionalTyp danych wyjściowych: SearchByTextRankPreference optionalDomyślnie:
nullSposób, w jaki wyniki będą klasyfikowane w odpowiedzi.
Atrybut HTML: rank-preference="value-name" |
textQuery
attr: text-query |
Typ danych wejściowych:
string optionalTyp danych wyjściowych: string optionalDomyślnie:
nullZapytanie tekstowe do wyszukiwania tekstowego.
Atrybut HTML: text-query="string" |
useStrictTypeFiltering
attr: use-strict-type-filtering |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: boolean optionalDomyślnie:
nullSłuży do ustawiania rygorystycznego filtrowania typów dla parametru „includedType”.
Atrybut HTML: use-strict-type-filtering |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
PlaceTextSearchRequestElementOptions interface
interfejs
google.maps.places.PlaceTextSearchRequestElementOptions
zaimplementowany przez PlaceTextSearchRequestElement
Opcje dotyczące: PlaceTextSearchRequestElement.
Właściwości | |
|---|---|
evConnectorTypes
opcjonalne |
Typ:
Array<EVConnectorType> optionalLista preferowanych typów złączy EV. Więcej informacji znajdziesz w SearchByTextRequest.evSearchOptions i PlaceTextSearchRequestElement.evConnectorTypes. |
evMinimumChargingRateKw
opcjonalne |
Typ:
number optionalMinimalna wymagana moc ładowania w kilowatach. Więcej informacji znajdziesz w SearchByTextRequest.evSearchOptions i PlaceTextSearchRequestElement.evMinimumChargingRateKw. |
futureOpeningBusinessesIncluded
opcjonalne |
Typ:
boolean optionalUwzględnij podpowiedzi miejsc dla firm, które nie są jeszcze otwarte, ale mają zostać otwarte w przyszłości. |
includedType
opcjonalne |
Typ:
string optionalŻądany typ miejsca. Więcej informacji znajdziesz w SearchByTextRequest.includedType i PlaceTextSearchRequestElement.includedType. |
isOpenNow
opcjonalne |
Typ:
boolean optionalSłuży do ograniczania wyszukiwania do miejsc, które są obecnie otwarte. Więcej informacji znajdziesz w SearchByTextRequest.isOpenNow i PlaceTextSearchRequestElement.isOpenNow. |
locationBias
opcjonalne |
Typ:
LocationBias optionalUstawienie lokalizacji na potrzeby wyszukiwania. Więcej informacji znajdziesz w SearchByTextRequest.locationBias i PlaceTextSearchRequestElement.locationBias. |
locationRestriction
opcjonalne |
Typ:
LatLngBounds|LatLngBoundsLiteral optionalOgraniczenie lokalizacji wyszukiwania. Więcej informacji znajdziesz w SearchByTextRequest.locationRestriction i PlaceTextSearchRequestElement.locationRestriction. |
maxResultCount
opcjonalne |
Typ:
number optionalMaksymalna liczba wyników do zwrócenia. Więcej informacji znajdziesz w SearchByTextRequest.maxResultCount i PlaceTextSearchRequestElement.maxResultCount. |
minRating
opcjonalne |
Typ:
number optionalOdfiltruj wyniki, których średnia ocena użytkowników jest niższa niż ten limit. Więcej informacji znajdziesz w SearchByTextRequest.minRating i PlaceTextSearchRequestElement.minRating. |
priceLevels
opcjonalne |
Typ:
Array<PriceLevel> optionalSłuży do ograniczania wyszukiwania do miejsc oznaczonych określonymi poziomami cen. Więcej informacji znajdziesz w SearchByTextRequest.priceLevels i PlaceTextSearchRequestElement.priceLevels. |
rankPreference
opcjonalne |
Typ:
SearchByTextRankPreference optionalSposób, w jaki wyniki będą klasyfikowane w odpowiedzi. Więcej informacji znajdziesz w SearchByTextRequest.rankPreference i PlaceTextSearchRequestElement.rankPreference. |
textQuery
opcjonalne |
Typ:
string optionalZapytanie tekstowe do wyszukiwania tekstowego. Więcej informacji znajdziesz w SearchByTextRequest.textQuery i PlaceTextSearchRequestElement.textQuery. |
useStrictTypeFiltering
opcjonalne |
Typ:
boolean optionalSłuży do ustawiania rygorystycznego filtrowania typów dla SearchByTextRequest.includedType. Więcej informacji znajdziesz w SearchByTextRequest.useStrictTypeFiltering i PlaceTextSearchRequestElement.useStrictTypeFiltering. |
Klasa Autocomplete
class
google.maps.places.Autocomplete
extends MVCObject
library "places"
Widżet, który wyświetla podpowiedzi miejsc na podstawie tekstu wpisanego przez użytkownika. Dołącza się do elementu wejściowego typu text i nasłuchuje wpisywania tekstu w tym polu. Lista podpowiedzi jest wyświetlana jako lista rozwijana i jest aktualizowana podczas wpisywania tekstu.
const {Autocomplete} = await google.maps.importLibrary("places");
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 granice, do których podpowiedzi są ukierunkowane. |
getFields |
getFields()Parametry: brak
Wartość zwracana:
Array<string>|undefinedZwraca pola, które mają zostać uwzględnione w odpowiedzi ze szczegółami miejsca, gdy szczegóły zostaną pomyślnie pobrane. Listę pól znajdziesz w artykule 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 pomyślnie pobrane. W przeciwnym razie zwraca obiekt Place z właściwością name ustawioną na bieżącą wartość pola do wprowadzania danych. |
setBounds |
setBounds(bounds)Parametry:
Zwracana wartość: brak
Ustawia 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 podpowiedzi tylko do tych, które znajdują się w komponencie nadrzędnym. Na przykład kraj. |
setFields |
setFields(fields)Parametry:
Zwracana wartość: brak
Ustawia pola, które mają być uwzględnione w odpowiedzi ze szczegółami miejsca, gdy szczegóły zostaną pomyślnie pobrane. Listę pól znajdziesz w artykule PlaceResult. |
setOptions |
setOptions(options)Parametry:
Zwracana wartość: brak
|
setTypes |
setTypes(types)Parametry:
Zwracana wartość: brak
Określa typy podpowiedzi, które mają być zwracane. Obsługiwane typy znajdziesz w przewodniku dla deweloperów. Jeśli nie określisz żadnych typów, zostaną zwrócone wszystkie typy. |
Dziedziczone:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Wydarzenia | |
|---|---|
place_changed |
function()Argumenty: brak
To zdarzenie jest wywoływane, gdy PlaceResult jest dostępny w miejscu wybranym przez użytkownika. Jeśli użytkownik wpisze nazwę miejsca, która nie została zasugerowana przez element sterujący, i naciśnie klawisz Enter lub jeśli żądanie informacji o miejscu się nie powiedzie, obiekt PlaceResult będzie zawierać dane wejściowe użytkownika we właściwości name, bez innych zdefiniowanych właściwości. |
AutocompleteOptions interface
interfejs
google.maps.places.AutocompleteOptions
Opcje, które można ustawić w obiekcie Autocomplete.
Właściwości | |
|---|---|
bounds
opcjonalne |
Typ:
LatLngBounds|LatLngBoundsLiteral optionalObszar, na którym chcesz wyszukać miejsca. |
componentRestrictions
opcjonalne |
Typ:
ComponentRestrictions optionalOgraniczenia dotyczące komponentu. Ograniczenia komponentów służą do ograniczania podpowiedzi tylko do tych, które znajdują się w komponencie nadrzędnym. Na przykład kraj. |
fields
opcjonalne |
Typ:
Array<string> optionalPola, które mają być uwzględnione w odpowiedzi ze szczegółami miejsca, gdy szczegóły zostaną pobrane, za które zostanie naliczona opłata. Jeśli podasz wartość ['ALL'], zostaną zwrócone wszystkie dostępne pola i zostaną za nie naliczone opłaty (nie zalecamy tego w przypadku wdrożeń produkcyjnych). Listę pól znajdziesz w artykule PlaceResult. Pola zagnieżdżone można określić za pomocą ścieżek z kropkami (np. "geometry.location"). Wartość domyślna to ['ALL']. |
opcjonalne |
Typ:
boolean optionalOkreśla, czy pobierać tylko identyfikatory miejsc. Obiekt PlaceResult udostępniany po wywołaniu zdarzenia place_changed będzie zawierał tylko pola identyfikator miejsca, types i name, a pola identyfikator miejsca, types i description będą zwracane przez usługę autouzupełniania. Domyślnie jest wyłączona. |
strictBounds
opcjonalne |
Typ:
boolean optionalWartość 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 wysyłania zapytania. Ustawienie parametru strictBounds na wartość false (która jest wartością domyślną) spowoduje, że wyniki będą faworyzować miejsca znajdujące się w granicach, ale nie będą ograniczone tylko do nich. |
types
opcjonalne |
Typ:
Array<string> optionalTypy podpowiedzi, które mają być zwracane. Obsługiwane typy znajdziesz w przewodniku dla deweloperów. Jeśli nie określisz żadnych typów, zostaną zwrócone wszystkie typy. |
Klasa SearchBox
class
google.maps.places.SearchBox
extends MVCObject
library "places"
Widżet, który wyświetla podpowiedzi na podstawie tekstu wpisanego przez użytkownika. Dołącza się do elementu wejściowego typu text i nasłuchuje wpisywania tekstu w tym polu. Lista podpowiedzi jest wyświetlana jako lista rozwijana i jest aktualizowana podczas wpisywania tekstu.
const {SearchBox} = await google.maps.importLibrary("places");
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
Wartość zwracana:
LatLngBounds|undefinedZwraca granice, do których są kierowane podpowiedzi zapytania. |
getPlaces |
getPlaces()Parametry: brak
Wartość zwracana:
Array<PlaceResult>|undefinedZwraca 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 dostosowywania podpowiedzi do zapytań. Wyniki będą tylko faworyzować ten obszar, a nie będą całkowicie do niego ograniczone. |
Dziedziczone:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Wydarzenia | |
|---|---|
places_changed |
function()Argumenty: brak
To zdarzenie jest wywoływane, gdy użytkownik wybierze zapytanie. Do pobierania nowych miejsc należy używać getPlaces. |
Interfejs SearchBoxOptions
interfejs
google.maps.places.SearchBoxOptions
Opcje, które można ustawić w obiekcie SearchBox.
Właściwości | |
|---|---|
bounds
opcjonalne |
Typ:
LatLngBounds|LatLngBoundsLiteral optionalObszar, na który mają być ukierunkowane podpowiedzi do zapytania. Podpowiedzi są ukierunkowane na zapytania dotyczące tych granic, ale nie są do nich ograniczone. |
PlaceContextualElement
class
google.maps.places.PlaceContextualElement
extends HTMLElement
implements PlaceContextualElementOptions
library "places"
Widżet, który używa tokena kontekstowego do wyświetlania widoku kontekstowego odpowiedzi z powiązania ze źródłami informacji przy użyciu Map Google.
<gmp-place-contextual context-token="string"> </gmp-place-contextual>
const {PlaceContextualElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceContextualElement |
PlaceContextualElement([options])Parametry:
|
Właściwości | |
|---|---|
contextToken
attr: context-token |
Typ danych wejściowych:
string optionalTyp danych wyjściowych: string optionalToken kontekstowy.
Atrybut HTML: context-token="string" |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
PlaceContextualElementOptions interface
interfejs
google.maps.places.PlaceContextualElementOptions
zaimplementowany przez PlaceContextualElement
Opcje dotyczące: PlaceContextualElement.
Właściwości | |
|---|---|
contextToken
opcjonalne |
Typ:
string optionalToken kontekstowy dostarczany przez odpowiedź funkcji powiązania ze źródłami informacji przy użyciu Map Google. |
PlaceContextualListConfigElement class
class
google.maps.places.PlaceContextualListConfigElement
extends HTMLElement
implements PlaceContextualListConfigElementOptions
library "places"
Element HTML, który konfiguruje opcje widoku listy elementu kontekstowego miejsca.
<gmp-place-contextual-list-config layout="value-name" map-hidden> </gmp-place-contextual-list-config>
const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlaceContextualListConfigElement |
PlaceContextualListConfigElement([options])Parametry:
|
Właściwości | |
|---|---|
layout
attr: layout |
Typ danych wejściowych:
PlaceContextualListLayout optionalTyp danych wyjściowych: PlaceContextualListLayoutUkład.
Atrybut HTML: layout="value-name" |
mapHidden
attr: map-hidden |
Typ danych wejściowych:
boolean optionalTyp danych wyjściowych: booleanCzy mapa jest ukryta.
Atrybut HTML: map-hidden |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Interfejs PlaceContextualListConfigElementOptions
interfejs
google.maps.places.PlaceContextualListConfigElementOptions
zaimplementowany przez PlaceContextualListConfigElement
Opcje elementu PlaceContextualListConfigElement.
Właściwości | |
|---|---|
layout
opcjonalne |
Typ:
PlaceContextualListLayout optionalDomyślnie:
PlaceContextualListLayout.VERTICALUkład. |
mapHidden
opcjonalne |
Typ:
boolean optionalDomyślnie:
falsePrawda, jeśli mapa ma być ukryta. |
Stałe PlaceContextualListLayout
stałe
google.maps.places.PlaceContextualListLayout
biblioteka "places"
Lista układów obsługiwanych przez element kontekstowy miejsca w widoku listy.
Te stałe mogą być też używane jako ciągi znaków. W języku TypeScript literały ciągów znaków są definiowane przez typ PlaceContextualListLayoutString.
const {PlaceContextualListLayout} = await google.maps.importLibrary("places");
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 rozwijanej liście. |
VERTICAL |
Układ listy pionowej: elementy listy są renderowane jako karty na liście pionowej. |
Klasa PlacePinElement
class
google.maps.places.PlacePinElement
extends HTMLElement
implements PlacePinElementOptions
library "places"
Wyświetla pinezkę miejsca na mapie, używając ikony kategorii lub zdjęcia miejsca. Dołącz PlaceDetailsPlaceRequestElement lub PlaceDetailsLocationRequestElement, aby określić miejsce. Użyj pinezki jako treści elementu AdvancedMarkerElement. Nieobsługiwane na mapach 3D.
Przykład:
<gmp-advanced-marker>
<gmp-place-pin>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-rating></gmp-place-rating>
</gmp-place-pin>
</gmp-advanced-marker> Aby używać tego elementu, włącz w projekcie w konsoli Google Cloud interfejs Places UI Kit API.
<gmp-place-pin icon="value-name" scale="number"> </gmp-place-pin>
const {PlacePinElement} = await google.maps.importLibrary("places");
Zespół | |
|---|---|
PlacePinElement |
PlacePinElement([options])Parametry:
|
Właściwości | |
|---|---|
icon
attr: icon |
Domyślnie:
PlacePinIcon.TYPEIkona wyświetlana wewnątrz pinezki. Zobacz
PlacePinIcon.Atrybut HTML: icon="value-name" |
photoRendered
readonly |
Typ:
booleanTylko do odczytu. Prawda, jeśli pinezka pokazuje zdjęcie miejsca. Zawsze fałsz, jeśli icon nie jest PHOTO. Jeśli icon to PHOTO, ale miejsce nie ma zdjęcia lub nie udało się go wczytać, ta wartość jest fałszywa, a pinezka pokazuje ikonę typu miejsca. Ustaw przed uruchomieniem tagu gmp-load. |
place
readonly |
Typ:
Place optionalTylko do odczytu. Obiekt miejsca zawierający identyfikator, lokalizację i widoczny obszar aktualnie renderowanego miejsca. undefined, jeśli miejsce nie zostało jeszcze wczytane lub nie udało się go wczytać. |
scale
attr: scale |
Typ danych wejściowych:
number optionalTyp danych wyjściowych: numberDomyślnie:
1Mnożnik rozmiaru pinezki.
Atrybut HTML: scale="number" |
Przedziały | |
|---|---|
default |
Opcjonalne treści wyświetlane na pinezce, takie jak PlaceRatingElement, niestandardowy <span> lub tekst. Elementy podrzędne Light DOM są umieszczane bezpośrednio w pinezce. Miejsce wyświetlania treści zależy od icon: obok ikony typu miejsca w przypadku TYPE, jako plakietka na zdjęciu w przypadku PHOTO i jako główna treść pinezki w przypadku NONE. |
Właściwości CSS | |
|---|---|
--gmp-background |
Kolor tła pinezki: pigułka, ramka zdjęcia, plakietka zdjęcia, dziób i obramowanie pinezki typu miejsca. |
--gmp-border-radius |
Promień obramowania pigułki (ikona typu miejsca z treścią w slocie lub sama treść w slocie) i ramki na zdjęcia w pinezkach PHOTO. Domyślna wartość to 30px w przypadku ikony typu miejsca z treścią w slocie, 12px w przypadku samej treści w slocie i 12px w przypadku ramki zdjęcia. Nie dotyczy pinezki typu miejsca bez treści w boksie. |
--gmp-glyph-background |
Kolor tła za glifem typu miejsca. Domyślnie jest to iconBackgroundColor miejsca. |
--gmp-glyph-color |
Kolor glifu typu miejsca. Ma zastosowanie zawsze, gdy wyświetlany jest glif, w tym gdy pinezka PHOTO jest zastępowana ikoną typu miejsca. |
Metody | |
|---|---|
Dziedziczone:
addEventListener,
removeEventListener
|
Wydarzenia | |
|---|---|
gmp-error |
function(event)Argumenty:
To zdarzenie jest wywoływane, gdy nie można wyrenderować pinezki, np. z powodu błędu sieci, błędu danych logowania (np. nieprawidłowego klucza interfejsu API), identyfikatora miejsca, którego nie można rozpoznać, lub miejsca bez lokalizacji. Pinezka jest ukryta. To zdarzenie nie jest przekazywane w górę. |
gmp-load |
function(event)Argumenty:
To zdarzenie jest wywoływane po wczytaniu informacji o miejscu i wyrenderowaniu pinezki. Gdy icon ma wartość PHOTO, uruchamia się tylko po załadowaniu zdjęcia lub po nieudanym załadowaniu. Samo nieudane załadowanie zdjęcia nie uruchamia gmp-error. Odczytaj wczytane miejsce z: PlacePinElement.place i sprawdź, czy zdjęcie jest wyświetlane z: PlacePinElement.photoRendered. To zdarzenie nie jest przekazywane w górę. |
Interfejs PlacePinElementOptions
interfejs
google.maps.places.PlacePinElementOptions
zaimplementowany przez PlacePinElement
Opcje tworzenia obiektu PlacePinElement.
Właściwości | |
|---|---|
icon
opcjonalne |
Typ:
PlacePinIcon optionalZobacz PlacePinElement.icon. |
scale
opcjonalne |
Typ:
number optionalZobacz PlacePinElement.scale. |
Stałe PlacePinIcon
stałe
google.maps.places.PlacePinIcon
biblioteka "places"
Opcje ikony: PlacePinElement. Wartość domyślna to TYPE. Jeśli brakuje danych potrzebnych do wyświetlenia wybranej ikony, pinezka będzie wyświetlać TYPE. Jeśli brakuje danych potrzebnych do wyświetlenia funkcji TYPE, zamiast niej wyświetlana jest ogólna ikona.
Te stałe mogą być też używane jako ciągi znaków. W języku TypeScript literały ciągów znaków są definiowane przez typ PlacePinIconString.
const {PlacePinIcon} = await google.maps.importLibrary("places");
Stałe | |
|---|---|
NONE |
Nie wyświetla ikony, tylko treści w slocie. |
PHOTO |
Wyświetla zdjęcie miejsca w kółku. Jeśli miejsce nie ma zdjęcia, używana jest ikona TYPE. |
TYPE |
Wyświetla ikonę kategorii miejsca. |