PlaceAutocompleteElement class
google.maps.places.PlaceAutocompleteElement
ชั้นเรียน
PlaceAutocompleteElement เป็นHTMLElementคลาสย่อยที่ให้คอมโพเนนต์ UI สำหรับ Places Autocomplete API
PlaceAutocompleteElement จะใช้ AutocompleteSessionToken โดยอัตโนมัติภายในเพื่อจัดกลุ่มระยะการค้นหาและระยะการเลือกของการค้นหาแบบเติมข้อความอัตโนมัติของผู้ใช้
การเรียกใช้ Place.fetchFields ครั้งแรกใน Place ที่ PlacePrediction.toPlace ส่งคืนจะรวมโทเค็นเซสชันที่ใช้ในการดึงข้อมูล PlacePrediction โดยอัตโนมัติ
ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีที่เซสชันทํางานได้ที่ https://developers.google.com/maps/documentation/places/web-service/place-session-tokens
องค์ประกอบที่กำหนดเอง:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceAutocompleteElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options)พารามิเตอร์:
|
พร็อพเพอร์ตี้ | |
|---|---|
includedPrimaryTypes |
ประเภท:
Array<string> optionalประเภทสถานที่หลักที่รวมไว้ (เช่น "restaurant" หรือ "gas_station")
ระบบจะแสดงสถานที่ก็ต่อเมื่อประเภทหลักของสถานที่นั้นรวมอยู่ในรายการนี้ โดยระบุได้สูงสุด 5 ค่า หากไม่ได้ระบุประเภท ระบบจะแสดงผลสถานที่ทุกประเภท แอตทริบิวต์ HTML:
|
includedRegionCodes |
ประเภท:
Array<string> optionalรวมเฉพาะผลการค้นหาในภูมิภาคที่ระบุ โดยระบุเป็นรหัสภูมิภาค 2 อักขระของ CLDR ได้สูงสุด 15 รายการ ชุดข้อมูลที่ว่างเปล่าจะไม่จำกัดผลลัพธ์ หากตั้งค่าทั้ง
locationRestriction และ includedRegionCodes ผลลัพธ์จะอยู่ในพื้นที่ที่ทับซ้อนกันแอตทริบิวต์ HTML:
|
locationBias |
ประเภท:
LocationBias optionalขอบเขตแบบยืดหยุ่นหรือคำใบ้ที่จะใช้เมื่อค้นหาสถานที่ |
locationRestriction |
ประเภท:
LocationRestriction optionalขอบเขตเพื่อจำกัดผลการค้นหา |
name |
ประเภท:
string optionalชื่อที่จะใช้สำหรับองค์ประกอบอินพุต ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name มีลักษณะการทำงานเหมือนกับแอตทริบิวต์ชื่อสำหรับอินพุต โปรดทราบว่านี่คือชื่อที่จะใช้เมื่อมีการส่งแบบฟอร์ม ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
แอตทริบิวต์ HTML:
|
origin |
ประเภท:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalต้นทางที่จะคำนวณระยะทาง หากไม่ได้ระบุ ระบบจะไม่คำนวณระยะทาง ระบบจะไม่ใช้ระดับความสูงในการคำนวณหากมีการระบุ
แอตทริบิวต์ HTML:
|
requestedLanguage |
ประเภท:
string optionalตัวระบุภาษาสำหรับภาษาที่ควรแสดงผลลัพธ์ (หากเป็นไปได้) ผลการค้นหาในภาษาที่เลือกอาจได้รับการจัดอันดับสูงขึ้น แต่คำแนะนำไม่ได้จำกัดอยู่แค่ในภาษานี้ ดูรายการภาษาที่รองรับ
แอตทริบิวต์ HTML:
|
requestedRegion |
ประเภท:
string optionalรหัสภูมิภาคที่ใช้สำหรับการจัดรูปแบบผลลัพธ์และการกรองผลลัพธ์ แต่ไม่ได้จำกัดการแนะนำไว้เฉพาะในประเทศนี้ รหัสภูมิภาคยอมรับค่า ccTLD ("โดเมนระดับบนสุด") ที่มีอักขระ 2 ตัว รหัส ccTLD ส่วนใหญ่จะเหมือนกับรหัส ISO 3166-1 แต่ก็มีข้อยกเว้นที่สำคัญบางประการ เช่น ccTLD ของสหราชอาณาจักรคือ "uk" (
.co.uk) ขณะที่รหัส ISO 3166-1 คือ "gb" (ในทางเทคนิคสำหรับนิติบุคคล "สหราชอาณาจักรบริเตนใหญ่และไอร์แลนด์เหนือ")แอตทริบิวต์ HTML:
|
unitSystem |
ประเภท:
UnitSystem optionalระบบหน่วยที่ใช้เพื่อแสดงระยะทาง หากไม่ได้ระบุ ระบบจะกำหนดระบบหน่วยตาม requestedRegion
แอตทริบิวต์ HTML:
|
ชิ้นส่วน | |
|---|---|
prediction-item |
รายการในการคาดคะเนแบบเลื่อนลงซึ่งแสดงการคาดคะเนรายการเดียว |
prediction-item-icon |
ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในรายการการคาดคะเน |
prediction-item-main-text |
ส่วนของรายการการคาดการณ์ที่เป็นข้อความหลักของการคาดการณ์ สำหรับสถานที่ทางภูมิศาสตร์ ฟิลด์นี้จะมีชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อและหมายเลขถนน เช่น "10 ถนนคิง" โดยค่าเริ่มต้น ระบบจะระบายสีดำให้กับข้อความหลักของรายการการคาดคะเน หากมีข้อความเพิ่มเติมใน prediction-item ข้อความนั้นจะอยู่นอก prediction-item-main-text และรับรูปแบบจาก prediction-item โดยจะมีสีเทาเป็นค่าเริ่มต้น โดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่ |
prediction-item-match |
ส่วนของการคาดการณ์ที่ส่งกลับซึ่งตรงกับอินพุตของผู้ใช้ โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นตัวหนา โปรดทราบว่าข้อความที่ตรงกันอาจอยู่ที่ใดก็ได้ภายใน prediction-item ซึ่งไม่จำเป็นต้องเป็นส่วนหนึ่งของ prediction-item-main-text |
prediction-item-selected |
รายการเมื่อผู้ใช้ไปยังรายการนั้นผ่านแป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะได้รับผลกระทบจากทั้งสไตล์ของส่วนนี้และสไตล์ของส่วนรายการที่คาดการณ์ |
prediction-list |
องค์ประกอบภาพที่มีรายการการคาดคะเนที่บริการเติมข้อความอัตโนมัติของสถานที่ส่งคืน รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้ PlaceAutocompleteElement |
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
กิจกรรม | |
|---|---|
gmp-error |
function(errorEvent)อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้จะไม่ฟอง |
gmp-select |
function(placePredictionSelectEvent)อาร์กิวเมนต์:
เหตุการณ์นี้จะทริกเกอร์เมื่อผู้ใช้เลือกการคาดคะเนสถานที่ มีออบเจ็กต์ PlacePrediction ซึ่งแปลงเป็นออบเจ็กต์ Place ได้ |
PlaceAutocompleteElementOptions อินเทอร์เฟซ
google.maps.places.PlaceAutocompleteElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับการสร้าง PlaceAutocompleteElement ดูคำอธิบายของแต่ละพร็อพเพอร์ตี้ได้ในพร็อพเพอร์ตี้ที่มีชื่อเดียวกันในคลาส PlaceAutocompleteElement
พร็อพเพอร์ตี้ | |
|---|---|
locationBias optional |
ประเภท:
LocationBias optional |
locationRestriction optional |
ประเภท:
LocationRestriction optional |
name optional |
ประเภท:
string optional |
requestedLanguage optional |
ประเภท:
string optional |
PlacePredictionSelectEvent class
google.maps.places.PlacePredictionSelectEvent
ชั้นเรียน
ระบบจะสร้างเหตุการณ์นี้หลังจากที่ผู้ใช้เลือกรายการการคาดคะเนด้วย PlaceAutocompleteElement เข้าถึงการเลือกด้วย event.placePrediction
แปลง placePrediction เป็น Place โดยเรียกใช้ PlacePrediction.toPlace
ชั้นเรียนนี้ขยายเวลา
Event
เข้าถึงได้โดยโทรไปที่ const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
พร็อพเพอร์ตี้ | |
|---|---|
placePrediction |
ประเภท:
PlacePredictionเปลี่ยนเป็น Place โดยโทรไปที่ PlacePrediction.toPlace |
PlaceAutocompleteRequestErrorEvent class
google.maps.places.PlaceAutocompleteRequestErrorEvent
ชั้นเรียน
เหตุการณ์นี้จะปล่อยโดย PlaceAutocompleteElement เมื่อมีปัญหาเกี่ยวกับคำขอเครือข่าย
ชั้นเรียนนี้ขยายเวลา
Event
เข้าถึงได้โดยโทรไปที่ const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceContextualElement class
google.maps.places.PlaceContextualElement
ชั้นเรียน
วิดเจ็ตที่ใช้โทเค็นบริบทเพื่อแสดงมุมมองตามบริบทของคำตอบการอ้างอิงจาก Google Maps
องค์ประกอบที่กำหนดเอง:
<gmp-place-contextual context-token="string"></gmp-place-contextual>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceContextualElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceContextualElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
พร็อพเพอร์ตี้ | |
|---|---|
contextToken |
ประเภท:
string optionalโทเค็นบริบท
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceContextualElementOptions อินเทอร์เฟซ
google.maps.places.PlaceContextualElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceContextualElement
พร็อพเพอร์ตี้ | |
|---|---|
contextToken optional |
ประเภท:
string optionalโทเค็นบริบทที่ได้จากคำตอบของ Grounding with Google Maps |
PlaceContextualListConfigElement class
google.maps.places.PlaceContextualListConfigElement
ชั้นเรียน
องค์ประกอบ HTML ที่กำหนดค่าตัวเลือกสำหรับมุมมองรายการขององค์ประกอบตามบริบทของสถานที่
องค์ประกอบที่กำหนดเอง:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceContextualListConfigElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
พร็อพเพอร์ตี้ | |
|---|---|
layout |
ประเภท:
PlaceContextualListLayout optionalเลย์เอาต์
แอตทริบิวต์ HTML:
|
mapHidden |
ประเภท:
boolean optionalซ่อนแผนที่หรือไม่
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceContextualListConfigElementOptions อินเทอร์เฟซ
google.maps.places.PlaceContextualListConfigElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceContextualListConfigElement
พร็อพเพอร์ตี้ | |
|---|---|
layout optional |
ประเภท:
PlaceContextualListLayout optionalเลย์เอาต์ ค่าเริ่มต้นคือ PlaceContextualListLayout.VERTICAL |
mapHidden optional |
ประเภท:
boolean optionalซ่อนแผนที่หรือไม่ ค่าเริ่มต้นคือการแสดงแผนที่ (ค่าเป็นเท็จ) |
PlaceContextualListLayout ค่าคงที่
google.maps.places.PlaceContextualListLayout
ค่าคงที่
รายการเลย์เอาต์ที่องค์ประกอบเชิงบริบทของสถานที่รองรับสำหรับมุมมองรายการ
เข้าถึงได้โดยโทรไปที่ const {PlaceContextualListLayout} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ค่าคงที่ | |
|---|---|
COMPACT |
เลย์เอาต์รายการแบบกะทัดรัด: รายการจะแสดงเป็นลิงก์ในบรรทัดเดียว โดยมีรายการที่เกินมาในรายการแบบเลื่อนลง |
VERTICAL |
เลย์เอาต์รายการแนวตั้ง: ระบบจะแสดงผลรายการเป็นบัตรในรายการแนวตั้ง |
PlaceDetailsElement class
google.maps.places.PlaceDetailsElement
ชั้นเรียน
องค์ประกอบ HTML ที่แสดงรายละเอียดของสถานที่ ใช้วิธี configureFromPlace() หรือ configureFromLocation() เพื่อระบุเนื้อหาที่จะแสดง หากต้องการใช้องค์ประกอบรายละเอียดสถานที่ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ใน Google Cloud Console
องค์ประกอบที่กำหนดเอง:
<gmp-place-details size="small"></gmp-place-details>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceDetailsElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceDetailsElement |
PlaceDetailsElement([options])พารามิเตอร์:
|
พร็อพเพอร์ตี้ | |
|---|---|
place |
ประเภท:
Place optionalอ่านอย่างเดียว Place ออบเจ็กต์ที่มีรหัส สถานที่ตั้ง และวิวพอร์ตของสถานที่ที่แสดงผลในปัจจุบัน |
size |
ประเภท:
PlaceDetailsSize optionalตัวแปรขนาดของ PlaceDetailsElement โดยค่าเริ่มต้น องค์ประกอบจะแสดง
PlaceDetailsSize.X_LARGEแอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
configureFromLocation |
configureFromLocation(location)พารามิเตอร์:
ค่าที่ส่งคืน:
Promise<void> สัญญาที่ได้รับการแก้ไขเมื่อโหลดและแสดงข้อมูลสถานที่แล้วกำหนดค่าวิดเจ็ตจาก LatLng โดยใช้การเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับ |
configureFromPlace |
configureFromPlace(place)พารามิเตอร์:
ค่าที่ส่งคืน:
Promise<void> สัญญาที่ได้รับการแก้ไขเมื่อโหลดและแสดงข้อมูลสถานที่แล้วกำหนดค่าวิดเจ็ตจากออบเจ็กต์ Place หรือรหัสสถานที่ |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
กิจกรรม | |
|---|---|
gmp-load |
function(event)อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มทำงานเมื่อองค์ประกอบโหลดและแสดงเนื้อหา เหตุการณ์นี้จะไม่ฟอง |
gmp-requesterror |
function(event)อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้จะไม่ฟอง |
PlaceDetailsElementOptions อินเทอร์เฟซ
google.maps.places.PlaceDetailsElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceDetailsElement
พร็อพเพอร์ตี้ | |
|---|---|
size optional |
ประเภท:
PlaceDetailsSize optional |
PlaceDetailsSize ค่าคงที่
google.maps.places.PlaceDetailsSize
ค่าคงที่
รายละเอียดปลีกย่อยของขนาดสำหรับ PlaceDetailsElement
เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsSize} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ค่าคงที่ | |
|---|---|
LARGE |
รูปแบบขนาดใหญ่ที่มีรูปภาพขนาดใหญ่ ข้อมูลพื้นฐาน และข้อมูลติดต่อ |
MEDIUM |
ตัวแปรขนาดกลางซึ่งรวมถึงรูปภาพขนาดใหญ่และข้อมูลพื้นฐาน |
SMALL |
ตัวแปรขนาดเล็กที่มีรูปภาพขนาดเล็กและข้อมูลพื้นฐาน |
X_LARGE |
รูปแบบขนาดใหญ่พิเศษซึ่งรวมถึงภาพคอลลาจ รีวิว และข้อมูลสถานที่ที่ครอบคลุม |
PlaceDetailsCompactElement class
google.maps.places.PlaceDetailsCompactElement
ชั้นเรียน
แสดงรายละเอียดของสถานที่ในเลย์เอาต์กะทัดรัด ต่อท้ายด้วย PlaceDetailsPlaceRequestElement เพื่อระบุสถานที่ที่จะแสดง ต่อท้ายด้วย PlaceContentConfigElement, PlaceStandardContentElement หรือ PlaceAllContentElement เพื่อระบุเนื้อหาที่จะแสดง
หากต้องการใช้องค์ประกอบนี้ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ของคุณใน Google Cloud Console
องค์ประกอบที่กำหนดเอง:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceDetailsCompactElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceDetailsCompactElement |
PlaceDetailsCompactElement([options])พารามิเตอร์:
|
พร็อพเพอร์ตี้ | |
|---|---|
orientation |
ประเภท:
PlaceDetailsOrientation optionalค่าเริ่มต้น:
PlaceDetailsOrientation.VERTICALตัวแปรการวางแนว (แนวตั้งหรือแนวนอน) ขององค์ประกอบ
แอตทริบิวต์ HTML:
|
place |
ประเภท:
Place optionalอ่านอย่างเดียว ออบเจ็กต์สถานที่ซึ่งมีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงในปัจจุบัน |
truncationPreferred |
ประเภท:
booleanค่าเริ่มต้น:
falseหากเป็นจริง ระบบจะตัดชื่อและที่อยู่ของสถานที่ให้พอดีกับ 1 บรรทัดแทนที่จะตัดคำ
แอตทริบิวต์ HTML:
|
พร็อพเพอร์ตี้ CSS | |
|---|---|
--gmp-mat-color-info |
สีขององค์ประกอบ UI ที่มีอารมณ์เชิงข้อมูล ใช้สำหรับไอคอนรถเข็น |
--gmp-mat-color-negative |
สีขององค์ประกอบ UI ที่มีอารมณ์เชิงลบ ใช้สำหรับข้อความ "ปิด" ในสถานะเปิดอยู่ |
--gmp-mat-color-neutral-container |
สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่เติมสีกลาง ใช้สำหรับตัวยึดตำแหน่งรูปภาพ |
--gmp-mat-color-on-secondary-container |
สีของข้อความและไอคอนเทียบกับสีคอนเทนเนอร์รอง ใช้สำหรับข้อความและไอคอนในปุ่ม "เปิดใน Maps" |
--gmp-mat-color-on-surface |
สีสำหรับข้อความและไอคอนที่ตัดกับสีพื้นผิว ใช้สำหรับข้อความปกติ |
--gmp-mat-color-on-surface-variant |
สีที่มีความสำคัญต่ำสำหรับข้อความและไอคอนบนสีพื้นผิว ใช้สำหรับข้อความที่เน้นน้อยกว่า |
--gmp-mat-color-outline-decorative |
สีเส้นขอบขององค์ประกอบที่ไม่ใช่แบบอินเทอร์แอกทีฟ ใช้สำหรับเส้นขอบขององค์ประกอบ |
--gmp-mat-color-positive |
สีขององค์ประกอบ UI ที่มีอารมณ์เชิงบวก ใช้สำหรับข้อความ "เปิด" ในสถานะเปิดอยู่ |
--gmp-mat-color-primary |
สีของข้อความและไอคอนแบบอินเทอร์แอกทีฟเทียบกับสีพื้นผิว ใช้สำหรับจำนวนรีวิวและลิงก์ในกล่องโต้ตอบการระบุแหล่งที่มา |
--gmp-mat-color-secondary-container |
สีเติมที่เด่นน้อยกว่าเมื่อเทียบกับพื้นผิว สำหรับคอมโพเนนต์ที่ซ่อนอยู่ เช่น ปุ่มสี ใช้สำหรับพื้นหลังของปุ่ม "เปิดใน Maps" |
--gmp-mat-color-surface |
สีสำหรับพื้นหลัง ใช้สำหรับพื้นหลังขององค์ประกอบและกล่องโต้ตอบการระบุแหล่งที่มา |
--gmp-mat-font-body-medium |
ใช้สำหรับข้อความเนื้อหาในกล่องโต้ตอบการระบุแหล่งที่มา |
--gmp-mat-font-body-small |
ใช้สำหรับที่อยู่ของสถานที่ การให้คะแนน ประเภท ราคา และสถานะเปิดอยู่ |
--gmp-mat-font-family |
ชุดแบบอักษรฐานที่ใช้กับข้อความทั้งหมด |
--gmp-mat-font-headline-medium |
ใช้สำหรับข้อความส่วนหัวในกล่องโต้ตอบการระบุแหล่งที่มา |
--gmp-mat-font-label-large |
ใช้สำหรับปุ่ม "เปิดใน Maps" และลิงก์ในกล่องโต้ตอบการระบุแหล่งที่มา |
--gmp-mat-font-title-small |
ใช้สำหรับชื่อสถานที่ |
background-color |
ลบล้างสีพื้นหลังขององค์ประกอบ |
border |
ลบล้างเส้นขอบขององค์ประกอบ |
border-radius |
ลบล้างรัศมีเส้นขอบขององค์ประกอบ |
color-scheme |
ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ใน color-scheme เอกสารประกอบ ค่าเริ่มต้นคือ color-scheme: light dark |
font-size |
ปรับขนาดข้อความและไอคอนทั้งหมดในองค์ประกอบ ซึ่งกำหนดไว้ภายในในหน่วย em ค่าเริ่มต้นคือ 16px |
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
กิจกรรม | |
|---|---|
gmp-error |
function(event)อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้จะไม่ฟอง |
gmp-load |
function(event)อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มทำงานเมื่อองค์ประกอบโหลดและแสดงเนื้อหา เหตุการณ์นี้จะไม่ฟอง |
PlaceDetailsCompactElementOptions interface
google.maps.places.PlaceDetailsCompactElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceDetailsCompactElement
พร็อพเพอร์ตี้ | |
|---|---|
orientation optional |
ประเภท:
PlaceDetailsOrientation optional |
truncationPreferred optional |
ประเภท:
boolean optional |
PlaceDetailsOrientation ค่าคงที่
google.maps.places.PlaceDetailsOrientation
ค่าคงที่
การวางแนวสำหรับ PlaceDetailsCompactElement
เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsOrientation} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ค่าคงที่ | |
|---|---|
HORIZONTAL |
การวางแนวนอน |
VERTICAL |
การวางแนวตั้ง |
PlaceDetailsPlaceRequestElement class
google.maps.places.PlaceDetailsPlaceRequestElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่แบบย่อเพื่อโหลดข้อมูลตามออบเจ็กต์ สถานที่ รหัส หรือชื่อทรัพยากร ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceDetailsCompactElement เพื่อโหลดข้อมูลสำหรับสถานที่ที่ระบุ
องค์ประกอบที่กำหนดเอง:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceDetailsPlaceRequestElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceDetailsPlaceRequestElement |
PlaceDetailsPlaceRequestElement([options])พารามิเตอร์:
|
พร็อพเพอร์ตี้ | |
|---|---|
place |
ประเภท:
Place optionalออบเจ็กต์ สถานที่ รหัส หรือชื่อทรัพยากรที่จะแสดงรายละเอียดในองค์ประกอบรายละเอียดสถานที่แบบย่อ พร็อพเพอร์ตี้นี้จะแสดงในแอตทริบิวต์เป็นชื่อทรัพยากร
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceDetailsPlaceRequestElementOptions interface
google.maps.places.PlaceDetailsPlaceRequestElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceDetailsPlaceRequestElement
พร็อพเพอร์ตี้ | |
|---|---|
place optional |
ประเภท:
Place|string optional |
PlaceContentConfigElement class
google.maps.places.PlaceContentConfigElement
ชั้นเรียน
กำหนดค่าเนื้อหาที่จะแสดงโดยองค์ประกอบรายละเอียดสถานที่ขนาดกะทัดรัด ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceDetailsCompactElement เพื่อใช้งาน ต่อท้ายองค์ประกอบต่อไปนี้ใน PlaceContentConfigElement เพื่อแสดงเนื้อหาที่เกี่ยวข้อง:
PlaceMediaElement, PlaceAddressElement, PlaceRatingElement, PlaceTypeElement, PlacePriceElement, PlaceAccessibleEntranceIconElement, PlaceOpenNowStatusElement, PlaceAttributionElement
ลำดับขององค์ประกอบย่อยไม่มีผล องค์ประกอบจะแสดงเนื้อหาตามลำดับมาตรฐานซึ่งปรับแต่งไม่ได้
องค์ประกอบที่กำหนดเอง:
<gmp-place-content-config></gmp-place-content-config>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceContentConfigElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceContentConfigElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceContentConfigElement |
PlaceContentConfigElement([options])พารามิเตอร์:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceContentConfigElementOptions อินเทอร์เฟซ
google.maps.places.PlaceContentConfigElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceContentConfigElement
PlaceMediaElement class
google.maps.places.PlaceMediaElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่แบบกะทัดรัดเพื่อแสดงสื่อของสถานที่ เช่น รูปภาพ ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceContentConfigElement เพื่อใช้งาน
องค์ประกอบที่กำหนดเอง:
<gmp-place-media lightbox-preferred></gmp-place-media>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceMediaElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceMediaElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceMediaElement |
PlaceMediaElement([options])พารามิเตอร์:
|
พร็อพเพอร์ตี้ | |
|---|---|
lightboxPreferred |
ประเภท:
boolean optionalค่าเริ่มต้น:
falseจะเปิดหรือปิดใช้ไลท์บ็อกซ์สื่อในกรณีที่รองรับทั้ง 2 ตัวเลือกหรือไม่
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceMediaElementOptions interface
google.maps.places.PlaceMediaElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceMediaElement
พร็อพเพอร์ตี้ | |
|---|---|
lightboxPreferred optional |
ประเภท:
boolean optional |
PlaceAddressElement class
google.maps.places.PlaceAddressElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่แบบย่อเพื่อแสดงที่อยู่ของสถานที่ ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceContentConfigElement เพื่อใช้งาน
องค์ประกอบที่กำหนดเอง:
<gmp-place-address></gmp-place-address>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceAddressElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceAddressElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceAddressElement |
PlaceAddressElement([options])พารามิเตอร์:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceAddressElementOptions อินเทอร์เฟซ
google.maps.places.PlaceAddressElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceAddressElement
PlaceRatingElement class
google.maps.places.PlaceRatingElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่แบบย่อเพื่อแสดงคะแนนของสถานที่ ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceContentConfigElement เพื่อใช้งาน
องค์ประกอบที่กำหนดเอง:
<gmp-place-rating></gmp-place-rating>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceRatingElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceRatingElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceRatingElement |
PlaceRatingElement([options])พารามิเตอร์:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceRatingElementOptions อินเทอร์เฟซ
google.maps.places.PlaceRatingElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceRatingElement
PlaceTypeElement class
google.maps.places.PlaceTypeElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่แบบย่อเพื่อแสดงประเภทของสถานที่ ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceContentConfigElement เพื่อใช้งาน
องค์ประกอบที่กำหนดเอง:
<gmp-place-type></gmp-place-type>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceTypeElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceTypeElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceTypeElement |
PlaceTypeElement([options])พารามิเตอร์:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceTypeElementOptions อินเทอร์เฟซ
google.maps.places.PlaceTypeElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceTypeElement
PlacePriceElement class
google.maps.places.PlacePriceElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่ขนาดกะทัดรัดเพื่อแสดงระดับราคาหรือช่วงราคาของสถานที่ ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceContentConfigElement เพื่อใช้งาน
องค์ประกอบที่กำหนดเอง:
<gmp-place-price></gmp-place-price>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlacePriceElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlacePriceElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlacePriceElement |
PlacePriceElement([options])พารามิเตอร์:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlacePriceElementOptions interface
google.maps.places.PlacePriceElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlacePriceElement
PlaceAccessibleEntranceIconElement class
google.maps.places.PlaceAccessibleEntranceIconElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่แบบย่อให้แสดงไอคอนเก้าอี้รถเข็นหากสถานที่นั้นมีทางเข้าที่รองรับเก้าอี้รถเข็น ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceContentConfigElement เพื่อใช้งาน
องค์ประกอบที่กำหนดเอง:
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceAccessibleEntranceIconElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceAccessibleEntranceIconElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceAccessibleEntranceIconElement |
PlaceAccessibleEntranceIconElement([options])พารามิเตอร์:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceAccessibleEntranceIconElementOptions อินเทอร์เฟซ
google.maps.places.PlaceAccessibleEntranceIconElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceAccessibleEntranceIconElement
PlaceOpenNowStatusElement class
google.maps.places.PlaceOpenNowStatusElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่ขนาดกะทัดรัดเพื่อแสดงสถานะเปิดหรือปิดปัจจุบันของสถานที่ ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceContentConfigElement เพื่อใช้งาน
องค์ประกอบที่กำหนดเอง:
<gmp-place-open-now-status></gmp-place-open-now-status>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceOpenNowStatusElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceOpenNowStatusElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceOpenNowStatusElement |
PlaceOpenNowStatusElement([options])พารามิเตอร์:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceOpenNowStatusElementOptions interface
google.maps.places.PlaceOpenNowStatusElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceOpenNowStatusElement
PlaceAttributionElement class
google.maps.places.PlaceAttributionElement
ชั้นเรียน
อนุญาตการปรับแต่งข้อความการระบุแหล่งที่มาของ Google Maps ในองค์ประกอบรายละเอียดสถานที่แบบย่อ ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceContentConfigElement เพื่อใช้งาน หากไม่มีองค์ประกอบนี้ ระบบจะยังคงแสดงการระบุแหล่งที่มาด้วยสีเริ่มต้น
องค์ประกอบที่กำหนดเอง:
<gmp-place-attribution dark-scheme-color="white" light-scheme-color="white"></gmp-place-attribution>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceAttributionElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceAttributionElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceAttributionElement |
PlaceAttributionElement([options])พารามิเตอร์:
|
พร็อพเพอร์ตี้ | |
|---|---|
darkSchemeColor |
ประเภท:
AttributionColor optionalค่าเริ่มต้น:
AttributionColor.WHITEสีของการระบุแหล่งที่มาของ Google Maps ในโหมดมืด
แอตทริบิวต์ HTML:
|
lightSchemeColor |
ประเภท:
AttributionColor optionalค่าเริ่มต้น:
AttributionColor.GRAYสีของการระบุแหล่งที่มาของ Google Maps ในโหมดสว่าง
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceAttributionElementOptions อินเทอร์เฟซ
google.maps.places.PlaceAttributionElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceAttributionElement
พร็อพเพอร์ตี้ | |
|---|---|
darkSchemeColor optional |
ประเภท:
AttributionColor optional |
lightSchemeColor optional |
ประเภท:
AttributionColor optional |
AttributionColor ค่าคงที่
google.maps.places.AttributionColor
ค่าคงที่
ตัวเลือกสีสำหรับข้อความระบุแหล่งที่มาของ Google Maps คุณปรับแต่งการระบุแหล่งที่มาให้ใช้สีใดสีหนึ่งต่อไปนี้ได้
เข้าถึงได้โดยโทรไปที่ const {AttributionColor} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ค่าคงที่ | |
|---|---|
BLACK |
ข้อความแสดงแหล่งที่มาสีดำ |
GRAY |
ข้อความระบุแหล่งที่มาสีเทา |
WHITE |
ข้อความแสดงแหล่งที่มาสีขาว |
PlaceAllContentElement class
google.maps.places.PlaceAllContentElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่แบบย่อเพื่อแสดงเนื้อหาทั้งหมดที่พร้อมใช้งาน ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceDetailsCompactElement เพื่อใช้งาน
องค์ประกอบที่กำหนดเอง:
<gmp-place-all-content></gmp-place-all-content>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceAllContentElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceAllContentElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceAllContentElement |
PlaceAllContentElement([options])พารามิเตอร์:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceAllContentElementOptions อินเทอร์เฟซ
google.maps.places.PlaceAllContentElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceAllContentElement
PlaceStandardContentElement class
google.maps.places.PlaceStandardContentElement
ชั้นเรียน
กำหนดค่าองค์ประกอบรายละเอียดสถานที่ขนาดกะทัดรัดเพื่อแสดงชุดเนื้อหามาตรฐาน (สื่อ การให้คะแนน ประเภท ราคา ไอคอนทางเข้าที่เข้าถึงได้ และสถานะเปิดอยู่) ผนวกองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceDetailsCompactElement เพื่อใช้งาน
องค์ประกอบที่กำหนดเอง:
<gmp-place-standard-content></gmp-place-standard-content>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceStandardContentElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceStandardContentElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceStandardContentElement |
PlaceStandardContentElement([options])พารามิเตอร์:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
PlaceStandardContentElementOptions อินเทอร์เฟซ
google.maps.places.PlaceStandardContentElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceStandardContentElement
PlaceListElement class
google.maps.places.PlaceListElement
ชั้นเรียน
องค์ประกอบ HTML ที่แสดงผลการค้นหาสถานที่ในรายการ ใช้เมธอด configureFromSearchByTextRequest() หรือ configureFromSearchNearbyRequest() เพื่อระบุคำขอให้แสดงผลลัพธ์ หากต้องการใช้องค์ประกอบรายการสถานที่ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ใน Google Cloud Console
องค์ประกอบที่กำหนดเอง:
<gmp-place-list selectable></gmp-place-list>
ชั้นเรียนนี้ขยายเวลา
HTMLElement
คลาสนี้ใช้
PlaceListElementOptions
เข้าถึงได้โดยโทรไปที่ const {PlaceListElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceListElement |
PlaceListElement([options])พารามิเตอร์:
|
พร็อพเพอร์ตี้ | |
|---|---|
places |
อ่านอย่างเดียว อาร์เรย์ของออบเจ็กต์ Place ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลในปัจจุบัน |
selectable |
ประเภท:
booleanรายการในลิสต์เลือกได้หรือไม่ หากเป็นจริง รายการจะกลายเป็นปุ่มที่ส่งเหตุการณ์
gmp-placeselect เมื่อคลิก นอกจากนี้ยังรองรับการไปยังส่วนต่างๆ และการเลือกด้วยแป้นพิมพ์ที่เข้าถึงได้ด้วยแอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
|
addEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request)พารามิเตอร์:
ค่าที่ส่งคืน:
Promise<void> สัญญาที่ได้รับการแก้ไขเมื่อโหลดและแสดงข้อมูลสถานที่แล้วกำหนดค่าวิดเจ็ตให้แสดงผลการค้นหาจากคำขอ Places Text Search API |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request)พารามิเตอร์:
ค่าที่ส่งคืน:
Promise<void> สัญญาที่ได้รับการแก้ไขเมื่อโหลดและแสดงข้อมูลสถานที่แล้วกำหนดค่าวิดเจ็ตให้แสดงผลการค้นหาจากคำขอ Places Nearby Search API |
|
removeEventListener(type, listener[, options])พารามิเตอร์:
ค่าที่ส่งคืน:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
กิจกรรม | |
|---|---|
gmp-load |
function(event)อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มทำงานเมื่อองค์ประกอบโหลดและแสดงเนื้อหา เหตุการณ์นี้จะไม่ฟอง |
gmp-placeselect |
function(event)อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้เลือกสถานที่ มีออบเจ็กต์ Place และดัชนีของสถานที่ที่เลือกในรายการ |
gmp-requesterror |
function(event)อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้จะไม่ฟอง |
PlaceListElementOptions อินเทอร์เฟซ
google.maps.places.PlaceListElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceListElement
พร็อพเพอร์ตี้ | |
|---|---|
selectable optional |
ประเภท:
boolean optional |
PlaceListPlaceSelectEvent class
google.maps.places.PlaceListPlaceSelectEvent
ชั้นเรียน
เหตุการณ์นี้จะปล่อยโดย PlaceListElement เมื่อผู้ใช้เลือกสถานที่
ชั้นเรียนนี้ขยายเวลา
Event
เข้าถึงได้โดยโทรไปที่ const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
พร็อพเพอร์ตี้ | |
|---|---|
index |
ประเภท:
numberดัชนีรายการของสถานที่ที่เลือก |
place |
ประเภท:
PlacePlace ออบเจ็กต์ที่มีรหัส สถานที่ตั้ง และวิวพอร์ตของสถานที่ที่เลือก |
เติมข้อความอัตโนมัติ คลาส
google.maps.places.Autocomplete
ชั้นเรียน
วิดเจ็ตที่แสดงการคาดคะเนสถานที่ตามข้อความที่ผู้ใช้ป้อน โดยจะแนบไปกับองค์ประกอบอินพุตประเภท text และรอรับการป้อนข้อความในช่องนั้น รายการการคาดคะเนจะแสดงเป็นรายการแบบเลื่อนลง และจะอัปเดตเมื่อมีการป้อนข้อความ
ชั้นเรียนนี้ขยายเวลา
MVCObject
เข้าถึงได้โดยโทรไปที่ const {Autocomplete} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
Autocomplete |
Autocomplete(inputField[, opts])พารามิเตอร์:
สร้างอินสแตนซ์ใหม่ของ Autocomplete ที่แนบกับช่องข้อความอินพุตที่ระบุพร้อมตัวเลือกที่กำหนด |
เมธอด | |
|---|---|
getBounds |
getBounds()พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:
LatLngBounds|undefined ขอบเขตการเอนเอียงแสดงขอบเขตที่การคาดการณ์มีแนวโน้ม |
getFields |
getFields()พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:
Array<string>|undefinedแสดงช่องที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดสำเร็จ ดูรายการช่องได้ที่ PlaceResult |
getPlace |
getPlace()พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:
PlaceResult สถานที่ที่ผู้ใช้เลือกแสดงรายละเอียดของสถานที่ที่ผู้ใช้เลือก หากดึงข้อมูลรายละเอียดได้สำเร็จ ไม่เช่นนั้นจะแสดงผลออบเจ็กต์ Place ที่เป็น Stub โดยมีพร็อพเพอร์ตี้ name ตั้งค่าเป็นค่าปัจจุบันของช่องป้อนข้อมูล |
setBounds |
setBounds(bounds)พารามิเตอร์:
ค่าที่ส่งคืน: ไม่มี
กำหนดพื้นที่ที่ต้องการซึ่งจะแสดงผลลัพธ์ของสถานที่ ผลลัพธ์จะเอนเอียงไปทางด้านนี้ แต่ไม่ได้จำกัดอยู่เพียงด้านนี้ |
setComponentRestrictions |
setComponentRestrictions(restrictions)พารามิเตอร์:
ค่าที่ส่งคืน: ไม่มี
ตั้งค่าข้อจำกัดของคอมโพเนนต์ ข้อจำกัดของคอมโพเนนต์ใช้เพื่อจำกัดการคาดการณ์ให้เฉพาะภายในคอมโพเนนต์หลัก เช่น ประเทศ |
setFields |
setFields(fields)พารามิเตอร์:
ค่าที่ส่งคืน: ไม่มี
กำหนดช่องที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดสำเร็จ ดูรายการช่องได้ที่ PlaceResult |
setOptions |
setOptions(options)พารามิเตอร์:
ค่าที่ส่งคืน: ไม่มี
|
setTypes |
setTypes(types)พารามิเตอร์:
ค่าที่ส่งคืน: ไม่มี
ตั้งค่าประเภทการคาดการณ์ที่จะแสดง ดูประเภทที่รองรับได้ใน คู่มือสำหรับนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลประเภททั้งหมด |
สืบทอด:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
กิจกรรม | |
|---|---|
place_changed |
function()อาร์กิวเมนต์: ไม่มี
ระบบจะทริกเกอร์เหตุการณ์นี้เมื่อมี PlaceResult สำหรับสถานที่ที่ผู้ใช้เลือก หากผู้ใช้ป้อนชื่อสถานที่ที่ตัวควบคุมไม่ได้แนะนำและกดแป้น Enter หรือหากคำขอรายละเอียดสถานที่ล้มเหลว PlaceResult จะมีข้อมูลที่ผู้ใช้ป้อนในพร็อพเพอร์ตี้ name โดยไม่มีการกำหนดพร็อพเพอร์ตี้อื่นๆ |
AutocompleteOptions อินเทอร์เฟซ
google.maps.places.AutocompleteOptions
อินเทอร์เฟซ
ตัวเลือกที่ตั้งค่าได้ในออบเจ็กต์ Autocomplete
พร็อพเพอร์ตี้ | |
|---|---|
bounds optional |
ประเภท:
LatLngBounds|LatLngBoundsLiteral optionalพื้นที่ที่จะค้นหาสถานที่ |
componentRestrictions optional |
ประเภท:
ComponentRestrictions optionalข้อจำกัดของคอมโพเนนต์ ข้อจำกัดของคอมโพเนนต์ใช้เพื่อจำกัดการคาดการณ์ให้เฉพาะภายในคอมโพเนนต์หลัก เช่น ประเทศ |
fields optional |
ประเภท:
Array<string> optionalฟิลด์ที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดสำเร็จ ซึ่งจะมีการเรียกเก็บเงิน หากส่ง ['ALL'] ระบบจะแสดงผลและเรียกเก็บเงินสำหรับช่องที่มีอยู่ทั้งหมด (ไม่แนะนำสำหรับการติดตั้งใช้งานจริง) ดูรายการช่องได้ที่ PlaceResult ระบุฟิลด์ที่ซ้อนกันได้ด้วยเส้นทางแบบจุด (เช่น "geometry.location") ค่าเริ่มต้นคือ ['ALL'] |
|
ประเภท:
boolean optionalกำหนดว่าจะดึงข้อมูลเฉพาะรหัสสถานที่หรือไม่ PlaceResult ที่พร้อมใช้งานเมื่อทริกเกอร์เหตุการณ์ place_changed จะมีเฉพาะฟิลด์ place_id, types และ name โดยมี place_id, types และ description ที่บริการเติมข้อความอัตโนมัติแสดง ปิดใช้โดยค่าเริ่มต้น |
strictBounds optional |
ประเภท:
boolean optionalค่าบูลีนที่ระบุว่าวิดเจ็ตการเติมข้อความอัตโนมัติควรแสดงเฉพาะสถานที่ที่อยู่ภายในขอบเขตของวิดเจ็ตการเติมข้อความอัตโนมัติ ณ เวลาที่ส่งคำค้นหา การตั้งค่า strictBounds เป็น false (ซึ่งเป็นค่าเริ่มต้น) จะทำให้ผลการค้นหามีแนวโน้มที่จะเป็นสถานที่ที่อยู่ในขอบเขต แต่จะไม่จำกัดเฉพาะสถานที่เหล่านั้น |
types optional |
ประเภท:
Array<string> optionalประเภทของการคาดการณ์ที่จะแสดง ดูประเภทที่รองรับได้ใน คู่มือสำหรับนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลประเภททั้งหมด |
SearchBox class
google.maps.places.SearchBox
ชั้นเรียน
วิดเจ็ตที่แสดงการคาดคะเนคำค้นหาตามข้อความที่ผู้ใช้ป้อน โดยจะแนบไปกับองค์ประกอบอินพุตประเภท text และรอรับการป้อนข้อความในช่องนั้น รายการการคาดคะเนจะแสดงเป็นรายการแบบเลื่อนลง และจะอัปเดตเมื่อมีการป้อนข้อความ
ชั้นเรียนนี้ขยายเวลา
MVCObject
เข้าถึงได้โดยโทรไปที่ const {SearchBox} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
SearchBox |
SearchBox(inputField[, opts])พารามิเตอร์:
สร้างอินสแตนซ์ใหม่ของ SearchBox ที่แนบกับช่องข้อความอินพุตที่ระบุพร้อมตัวเลือกที่กำหนด |
เมธอด | |
|---|---|
getBounds |
getBounds()พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:
LatLngBounds|undefinedแสดงขอบเขตที่การคาดคะเนการค้นหามีแนวโน้ม |
getPlaces |
getPlaces()พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:
Array<PlaceResult>|undefinedแสดงคำค้นหาที่ผู้ใช้เลือกเพื่อใช้กับเหตุการณ์ places_changed |
setBounds |
setBounds(bounds)พารามิเตอร์:
ค่าที่ส่งคืน: ไม่มี
ตั้งค่าภูมิภาคที่จะใช้สำหรับการคาดการณ์การค้นหาแบบเอนเอียง ผลลัพธ์จะเอนเอียงไปทางด้านนี้เท่านั้น แต่จะไม่จำกัดอยู่แค่ด้านนี้ |
สืบทอด:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
กิจกรรม | |
|---|---|
places_changed |
function()อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะทริกเกอร์เมื่อผู้ใช้เลือกคำค้นหา getPlaces ควรใช้เพื่อรับสถานที่ใหม่ |
SearchBoxOptions อินเทอร์เฟซ
google.maps.places.SearchBoxOptions
อินเทอร์เฟซ
ตัวเลือกที่ตั้งค่าได้ในออบเจ็กต์ SearchBox
พร็อพเพอร์ตี้ | |
|---|---|
bounds optional |
ประเภท:
LatLngBounds|LatLngBoundsLiteral optionalพื้นที่ที่จะใช้เพื่อเอนเอียงการคาดการณ์การค้นหา การคาดการณ์จะเอนเอียงไปทางคำค้นหาที่กำหนดขอบเขตเหล่านี้ แต่ไม่ได้จำกัดอยู่เพียงคำค้นหาดังกล่าว |