PlaceAutocompleteElement class
Class
google.maps.places.PlaceAutocompleteElement
PlaceAutocompleteElement adalah subclass HTMLElement
yang menyediakan komponen UI untuk Places Autocomplete API.
Elemen kustom:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng|lat,lng,altitude" requested-language="string" requested-region="string" unit-system="metric|imperial" types="type1 type2 type3..."></gmp-place-autocomplete>
Class ini memperluas
HTMLElement
.
Class ini mengimplementasikan
PlaceAutocompleteElementOptions
.
Akses dengan memanggil const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Konstruktor | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) Parameter:
|
Properti | |
---|---|
|
Jenis:
Array<string> optional Mencakup Jenis tempat utama (misalnya, "restaurant" atau "gas_station").
Tempat hanya ditampilkan jika jenis utamanya disertakan dalam daftar ini. Maksimal 5 nilai dapat ditentukan. Jika tidak ada jenis yang ditentukan, semua jenis Tempat akan ditampilkan. Atribut HTML:
|
|
Jenis:
Array<string> optional Hanya menyertakan hasil di wilayah yang ditentukan, yang ditentukan sebagai hingga 15 kode wilayah dua karakter CLDR. Set kosong tidak akan membatasi hasil. Jika
locationRestriction dan includedRegionCodes ditetapkan, hasilnya akan berada di area persimpangan.Atribut HTML:
|
locationBias |
Jenis:
LocationBias optional Petunjuk atau batas lunak yang digunakan saat menelusuri tempat. |
locationRestriction |
Jenis:
LocationRestriction optional Batas untuk membatasi hasil penelusuran. |
name |
Jenis:
string optional Nama yang akan digunakan untuk elemen input. Lihat https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name untuk mengetahui detailnya. Mengikuti perilaku yang sama dengan atribut nama untuk input. Perhatikan bahwa ini adalah nama yang akan digunakan saat formulir dikirimkan. Lihat https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form untuk mengetahui detailnya.
Atribut HTML:
|
|
Jenis:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Asal untuk menghitung jarak. Jika tidak ditentukan, jarak tidak dihitung. Ketinggian, jika diberikan, tidak digunakan dalam penghitungan.
Atribut HTML:
|
requestedLanguage |
Jenis:
string optional ID bahasa untuk bahasa yang digunakan untuk menampilkan hasil, jika memungkinkan. Hasil dalam bahasa yang dipilih mungkin diberi peringkat yang lebih tinggi, tetapi saran tidak terbatas pada bahasa ini. Lihat daftar bahasa yang didukung.
Atribut HTML:
|
requestedRegion |
Jenis:
string optional Kode wilayah yang digunakan untuk pemformatan hasil dan untuk pemfilteran hasil. Hal ini tidak membatasi saran ke negara ini. Kode wilayah menerima nilai dua karakter ccTLD ("domain level teratas"). Umumnya kode ccTLD identik dengan kode ISO 3166-1, dengan beberapa pengecualian. Misalnya, ccTLD Inggris Raya adalah "uk" (
.co.uk ), sedangkan kode ISO 3166-1-nya adalah "gb" (secara teknis untuk entitas "The United Kingdom of Great Britain and Northern Ireland").Atribut HTML:
|
|
Jenis:
UnitSystem optional Sistem satuan yang digunakan untuk menampilkan jarak. Jika tidak ditentukan, sistem unit ditentukan oleh requestedRegion.
Atribut HTML:
|
|
Jenis:
ComponentRestrictions optional Batasan komponen. Pembatasan komponen digunakan untuk membatasi prediksi hanya pada prediksi dalam komponen induk. Misalnya, negara. |
|
Jenis:
Array<string> optional Jenis prediksi yang akan ditampilkan. Untuk jenis yang didukung, lihat panduan developer. Jika tidak ada jenis yang ditentukan, semua jenis akan ditampilkan.
Atribut HTML:
|
Suku cadang | |
---|---|
prediction-item |
Item dalam drop-down prediksi yang mewakili satu prediksi. |
prediction-item-icon |
Ikon yang ditampilkan di sebelah kiri setiap item dalam daftar prediksi. |
prediction-item-main-text |
Bagian item prediksi yang merupakan teks utama prediksi. Untuk lokasi geografis, isinya adalah nama tempat, seperti 'Sydney', atau nama jalan dan nomor rumah, seperti '10 King Street'. Secara default, prediction-item-main-text berwarna hitam. Jika ada teks tambahan dalam prediction-item, teks tersebut berada di luar prediction-item-main-text dan mewarisi gayanya dari prediction-item. Secara default, warnanya abu-abu. Teks tambahan biasanya berupa alamat. |
prediction-item-match |
Bagian dari prediksi yang dikembalikan sesuai dengan masukan pengguna. Secara default, teks yang cocok ini disorot dalam teks tebal. Perhatikan bahwa teks yang cocok dapat berada di mana saja dalam prediction-item. Class ini belum tentu bagian dari prediction-item-main-text. |
prediction-item-selected |
Item saat pengguna menavigasi ke item tersebut melalui keyboard. Catatan: Item yang dipilih akan terpengaruh oleh gaya bagian ini dan juga gaya bagian item prediksi. |
prediction-list |
Elemen visual berisi daftar prediksi yang dikembalikan oleh layanan Place Autocomplete. Daftar ini muncul sebagai daftar dropdown di bawah PlaceAutocompleteElement. |
Metode | |
---|---|
|
addEventListener(type, listener[, options]) Parameter:
Nilai yang Ditampilkan:
void Menyiapkan fungsi yang akan dipanggil setiap kali peristiwa yang ditentukan dikirimkan ke target. Lihat addEventListener. |
|
removeEventListener(type, listener[, options]) Parameter:
Nilai yang Ditampilkan:
void Menghapus pemroses peristiwa yang sebelumnya didaftarkan dengan addEventListener dari target. Lihat removeEventListener. |
Acara | |
---|---|
gmp-error |
function(errorEvent) Argumen:
Peristiwa ini dipicu saat permintaan ke backend ditolak (misalnya, kunci API salah). Peristiwa ini tidak menggelembung. |
gmp-select |
function(placePredictionSelectEvent) Argumen:
Peristiwa ini diaktifkan saat pengguna memilih prediksi tempat. Berisi objek PlacePrediction yang dapat dikonversi menjadi objek Place. |
|
function(placeAutocompletePlaceSelectEvent) Argumen:
Peristiwa ini diaktifkan saat pengguna memilih prediksi tempat. Berisi objek Place. |
PlaceAutocompleteElementOptions interface
google.maps.places.PlaceAutocompleteElementOptions
interface
Opsi untuk membuat PlaceAutocompleteElement. Untuk deskripsi setiap properti, lihat properti dengan nama yang sama di class PlaceAutocompleteElement.
Properti | |
---|---|
|
Jenis:
ComponentRestrictions optional |
|
Jenis:
Array<string> optional |
|
Jenis:
Array<string> optional |
locationBias optional |
Jenis:
LocationBias optional |
locationRestriction optional |
Jenis:
LocationRestriction optional |
name optional |
Jenis:
string optional |
|
Jenis:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Jenis:
string optional |
|
Jenis:
Array<string> optional |
|
Jenis:
UnitSystem optional |
Class PlaceAutocompletePlaceSelectEvent
Class
google.maps.places.PlaceAutocompletePlaceSelectEvent
Peristiwa ini dibuat setelah pengguna memilih tempat dengan Elemen Place Autocomplete. Akses pilihan dengan event.place
.
Class ini memperluas
Event
.
Akses dengan memanggil const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Properti | |
---|---|
|
Jenis:
Place |
PlacePredictionSelectEvent class
Class
google.maps.places.PlacePredictionSelectEvent
Peristiwa ini dibuat setelah pengguna memilih item prediksi dengan PlaceAutocompleteElement. Akses pilihan dengan event.placePrediction
.
Class ini memperluas
Event
.
Akses dengan memanggil const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Properti | |
---|---|
placePrediction |
Jenis:
PlacePrediction |
PlaceAutocompleteRequestErrorEvent class
Class
google.maps.places.PlaceAutocompleteRequestErrorEvent
Peristiwa ini dipancarkan oleh PlaceAutocompleteElement saat ada masalah dengan permintaan jaringan.
Class ini memperluas
Event
.
Akses dengan memanggil const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Kelas PlaceDetailsElement
Class
google.maps.places.PlaceDetailsElement
Elemen HTML yang menampilkan detail tempat. Gunakan metode configureFromPlace()
atau configureFromLocation()
untuk menentukan konten yang akan dirender. Untuk menggunakan Elemen Detail Tempat, aktifkan Places UI Kit API untuk project Anda di konsol Google Cloud.
Elemen kustom:
<gmp-place-details size="small"></gmp-place-details>
Class ini memperluas
HTMLElement
.
Class ini mengimplementasikan
PlaceDetailsElementOptions
.
Akses dengan memanggil const {PlaceDetailsElement} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Konstruktor | |
---|---|
PlaceDetailsElement |
PlaceDetailsElement([options]) Parameter:
|
Properti | |
---|---|
place |
Jenis:
Place optional Hanya baca. Objek Place yang berisi ID, lokasi, dan area tampilan tempat yang saat ini dirender. |
size |
Jenis:
PlaceDetailsSize optional Varian ukuran PlaceDetailsElement. Secara default, elemen akan menampilkan
PlaceDetailsSize.X_LARGE .Atribut HTML:
|
Metode | |
---|---|
|
addEventListener(type, listener[, options]) Parameter:
Nilai yang Ditampilkan:
void Menyiapkan fungsi yang akan dipanggil setiap kali peristiwa yang ditentukan dikirimkan ke target. Lihat addEventListener. |
configureFromLocation |
configureFromLocation(location) Parameter:
Nilai yang Ditampilkan:
Promise<void> Promise yang diselesaikan setelah data tempat dimuat dan dirender.Mengonfigurasi widget dari LatLng menggunakan geocoding terbalik. |
configureFromPlace |
configureFromPlace(place) Parameter:
Nilai yang Ditampilkan:
Promise<void> Promise yang diselesaikan setelah data tempat dimuat dan dirender.Mengonfigurasi widget dari objek Place atau ID Tempat. |
|
removeEventListener(type, listener[, options]) Parameter:
Nilai yang Ditampilkan:
void Menghapus pemroses peristiwa yang sebelumnya didaftarkan dengan addEventListener dari target. Lihat removeEventListener. |
Acara | |
---|---|
gmp-load |
function(event) Argumen:
Peristiwa ini dipicu saat elemen memuat dan merender kontennya. Peristiwa ini tidak menggelembung. |
gmp-requesterror |
function(event) Argumen:
Peristiwa ini dipicu saat permintaan ke backend ditolak (misalnya, kunci API salah). Peristiwa ini tidak menggelembung. |
PlaceDetailsElementOptions interface
google.maps.places.PlaceDetailsElementOptions
interface
Opsi untuk PlaceDetailsElement
.
Properti | |
---|---|
size optional |
Jenis:
PlaceDetailsSize optional Lihat PlaceDetailsElement.size |
PlaceDetailsSize constants
google.maps.places.PlaceDetailsSize
konstanta
Varian ukuran untuk PlaceDetailsElement
.
Akses dengan memanggil const {PlaceDetailsSize} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Konstanta | |
---|---|
LARGE |
Varian besar yang mencakup gambar besar, informasi dasar, dan informasi kontak. |
MEDIUM |
Varian sedang yang menyertakan gambar besar dan informasi dasar. |
SMALL |
Varian kecil yang menyertakan gambar kecil dan informasi dasar. |
X_LARGE |
Varian sangat besar yang mencakup kolase foto, ulasan, dan informasi tempat yang komprehensif. |
Class PlaceListElement
Class
google.maps.places.PlaceListElement
Elemen HTML yang menampilkan hasil penelusuran tempat dalam daftar. Gunakan metode configureFromSearchByTextRequest()
atau configureFromSearchNearbyRequest()
untuk menentukan permintaan untuk merender hasil. Untuk menggunakan Elemen Daftar Tempat, aktifkan Places UI Kit API untuk project Anda di Konsol Google Cloud.
Elemen kustom:
<gmp-place-list selectable></gmp-place-list>
Class ini memperluas
HTMLElement
.
Class ini mengimplementasikan
PlaceListElementOptions
.
Akses dengan memanggil const {PlaceListElement} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Konstruktor | |
---|---|
PlaceListElement |
PlaceListElement([options]) Parameter:
|
Properti | |
---|---|
places |
Hanya baca. Array objek Place yang berisi ID, lokasi, dan area tampilan tempat yang saat ini dirender. |
selectable |
Jenis:
boolean Apakah item daftar dapat dipilih atau tidak. Jika benar, item daftar akan menjadi tombol yang mengirimkan peristiwa
gmp-placeselect saat diklik. Navigasi dan pemilihan keyboard yang dapat diakses juga didukung.Atribut HTML:
|
Metode | |
---|---|
|
addEventListener(type, listener[, options]) Parameter:
Nilai yang Ditampilkan:
void Menyiapkan fungsi yang akan dipanggil setiap kali peristiwa yang ditentukan dikirimkan ke target. Lihat addEventListener. |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request) Parameter:
Nilai yang Ditampilkan:
Promise<void> Promise yang diselesaikan setelah data tempat dimuat dan dirender.Mengonfigurasi widget untuk merender hasil penelusuran dari permintaan Places Text Search API. |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request) Parameter:
Nilai yang Ditampilkan:
Promise<void> Promise yang diselesaikan setelah data tempat dimuat dan dirender.Mengonfigurasi widget untuk merender hasil penelusuran dari permintaan Places Nearby Search API. |
|
removeEventListener(type, listener[, options]) Parameter:
Nilai yang Ditampilkan:
void Menghapus pemroses peristiwa yang sebelumnya didaftarkan dengan addEventListener dari target. Lihat removeEventListener. |
Acara | |
---|---|
gmp-load |
function(event) Argumen:
Peristiwa ini dipicu saat elemen memuat dan merender kontennya. Peristiwa ini tidak menggelembung. |
gmp-placeselect |
function(event) Argumen:
Peristiwa ini diaktifkan saat pengguna memilih tempat. Berisi objek Place dan indeks tempat yang dipilih dalam daftar. |
gmp-requesterror |
function(event) Argumen:
Peristiwa ini dipicu saat permintaan ke backend ditolak (misalnya, kunci API salah). Peristiwa ini tidak menggelembung. |
PlaceListElementOptions interface
google.maps.places.PlaceListElementOptions
interface
Opsi untuk PlaceListElement
.
Properti | |
---|---|
selectable optional |
Jenis:
boolean optional |
PlaceListPlaceSelectEvent class
Class
google.maps.places.PlaceListPlaceSelectEvent
Peristiwa ini dipancarkan oleh PlaceListElement
saat pengguna memilih tempat.
Class ini memperluas
Event
.
Akses dengan memanggil const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Properti | |
---|---|
index |
Jenis:
number Indeks daftar tempat yang dipilih. |
place |
Jenis:
Place Objek Place yang berisi ID, lokasi, dan area tampilan tempat yang dipilih. |
Autocomplete class
Class
google.maps.places.Autocomplete
Widget yang memberikan prediksi Tempat berdasarkan input teks pengguna. Objek ini dilampirkan ke elemen input jenis text
, dan memproses entri teks di kolom tersebut. Daftar prediksi ditampilkan sebagai daftar drop-down, dan diperbarui saat teks dimasukkan.
Class ini memperluas
MVCObject
.
Akses dengan memanggil const {Autocomplete} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Konstruktor | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) Parameter:
Membuat instance Autocomplete baru yang dilampirkan ke kolom teks input yang ditentukan dengan opsi yang diberikan. |
Metode | |
---|---|
getBounds |
getBounds() Parameter: Tidak ada
Nilai yang Ditampilkan:
LatLngBounds|undefined Batas bias.Menampilkan batas tempat prediksi dibiaskan. |
getFields |
getFields() Parameter: Tidak ada
Nilai yang Ditampilkan:
Array<string>|undefined Menampilkan kolom yang akan disertakan untuk Tempat dalam respons detail saat detail berhasil diambil. Untuk mengetahui daftar kolom, lihat PlaceResult . |
getPlace |
getPlace() Parameter: Tidak ada
Nilai yang Ditampilkan:
PlaceResult Tempat yang dipilih oleh pengguna.Menampilkan detail Tempat yang dipilih oleh pengguna jika detail berhasil diambil. Jika tidak, akan menampilkan objek Place stub, dengan properti name yang ditetapkan ke nilai kolom input saat ini. |
setBounds |
setBounds(bounds) Parameter:
Nilai yang Ditampilkan: Tidak Ada
Menetapkan area pilihan untuk menampilkan hasil Tempat. Hasilnya dicondongkan ke, tetapi tidak terbatas pada, area ini. |
setComponentRestrictions |
setComponentRestrictions(restrictions) Parameter:
Nilai yang Ditampilkan: Tidak Ada
Menetapkan batasan komponen. Pembatasan komponen digunakan untuk membatasi prediksi hanya pada prediksi dalam komponen induk. Misalnya, negara. |
setFields |
setFields(fields) Parameter:
Nilai yang Ditampilkan: Tidak Ada
Menetapkan kolom yang akan disertakan untuk Tempat dalam respons detail saat detail berhasil diambil. Untuk mengetahui daftar kolom, lihat PlaceResult . |
setOptions |
setOptions(options) Parameter:
Nilai yang Ditampilkan: Tidak Ada
|
setTypes |
setTypes(types) Parameter:
Nilai yang Ditampilkan: Tidak Ada
Menetapkan jenis prediksi yang akan ditampilkan. Untuk jenis yang didukung, lihat panduan developer. Jika tidak ada jenis yang ditentukan, semua jenis akan ditampilkan. |
Diwariskan:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Acara | |
---|---|
place_changed |
function() Argumen: Tidak ada
Peristiwa ini diaktifkan saat PlaceResult tersedia untuk Tempat yang telah dipilih pengguna. Jika pengguna memasukkan nama Tempat yang tidak disarankan oleh kontrol dan menekan tombol Enter, atau jika permintaan Detail Tempat gagal, PlaceResult akan berisi input pengguna dalam properti name , tanpa properti lain yang ditentukan. |
Antarmuka AutocompleteOptions
google.maps.places.AutocompleteOptions
interface
Opsi yang dapat ditetapkan pada objek Autocomplete
.
Properti | |
---|---|
bounds optional |
Jenis:
LatLngBounds|LatLngBoundsLiteral optional Area untuk menelusuri tempat. |
componentRestrictions optional |
Jenis:
ComponentRestrictions optional Batasan komponen. Pembatasan komponen digunakan untuk membatasi prediksi hanya pada prediksi dalam komponen induk. Misalnya, negara. |
fields optional |
Jenis:
Array<string> optional Kolom yang akan disertakan untuk Tempat dalam respons detail saat detail berhasil diambil, yang akan ditagih. Jika ['ALL'] diteruskan, semua kolom yang tersedia akan ditampilkan dan ditagih (hal ini tidak direkomendasikan untuk deployment produksi). Untuk mengetahui daftar kolom, lihat PlaceResult . Kolom bertingkat dapat ditentukan dengan jalur titik (misalnya, "geometry.location" ). Defaultnya adalah ['ALL'] . |
|
Jenis:
boolean optional Apakah hanya mengambil ID Tempat. PlaceResult yang tersedia saat peristiwa place_changed diaktifkan hanya akan memiliki kolom place_id, types, dan name, dengan place_id, types, dan description yang ditampilkan oleh layanan Autocomplete. Dinonaktifkan secara default. |
strictBounds optional |
Jenis:
boolean optional Nilai boolean, yang menunjukkan bahwa widget Autocomplete hanya boleh menampilkan tempat yang berada dalam batas widget Autocomplete pada saat kueri dikirim. Menetapkan strictBounds ke false (yang merupakan default) akan membuat hasil dicondongkan ke, tetapi tidak terbatas pada, tempat yang berada dalam batas. |
types optional |
Jenis:
Array<string> optional Jenis prediksi yang akan ditampilkan. Untuk jenis yang didukung, lihat panduan developer. Jika tidak ada jenis yang ditentukan, semua jenis akan ditampilkan. |
Class SearchBox
Class
google.maps.places.SearchBox
Widget yang memberikan prediksi kueri berdasarkan input teks pengguna. Objek ini dilampirkan ke elemen input jenis text
, dan memproses entri teks di kolom tersebut. Daftar prediksi ditampilkan sebagai daftar drop-down, dan diperbarui saat teks dimasukkan.
Class ini memperluas
MVCObject
.
Akses dengan memanggil const {SearchBox} = await google.maps.importLibrary("places")
.
Lihat Library di Maps JavaScript API.
Konstruktor | |
---|---|
SearchBox |
SearchBox(inputField[, opts]) Parameter:
Membuat instance SearchBox baru yang dilampirkan ke kolom teks input yang ditentukan dengan opsi yang diberikan. |
Metode | |
---|---|
getBounds |
getBounds() Parameter: Tidak ada
Nilai yang Ditampilkan:
LatLngBounds|undefined Menampilkan batas yang menjadi bias prediksi kueri. |
getPlaces |
getPlaces() Parameter: Tidak ada
Nilai yang Ditampilkan:
Array<PlaceResult>|undefined Menampilkan kueri yang dipilih oleh pengguna untuk digunakan dengan peristiwa places_changed . |
setBounds |
setBounds(bounds) Parameter:
Nilai yang Ditampilkan: Tidak Ada
Menetapkan region yang akan digunakan untuk memengaruhi prediksi kueri. Hasil hanya akan dicondongkan ke area ini dan tidak sepenuhnya dibatasi untuk area ini. |
Diwariskan:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Acara | |
---|---|
places_changed |
function() Argumen: Tidak ada
Peristiwa ini diaktifkan saat pengguna memilih kueri, getPlaces harus digunakan untuk mendapatkan tempat baru. |
SearchBoxOptions interface
google.maps.places.SearchBoxOptions
interface
Opsi yang dapat ditetapkan pada objek SearchBox
.
Properti | |
---|---|
bounds optional |
Jenis:
LatLngBounds|LatLngBoundsLiteral optional Area yang akan memengaruhi prediksi kueri. Prediksi dibiaskan terhadap, tetapi tidak terbatas pada, kueri yang menargetkan batas ini. |