คลาส PlaceAutocompleteElement
ชั้นเรียน
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ประเภทสถานที่หลักที่รวมอยู่ (เช่น "ร้านอาหาร" หรือ "ปั๊มน้ำมัน")
ระบบจะแสดงผลสถานที่ก็ต่อเมื่อประเภทหลักของสถานที่นั้นรวมอยู่ในรายการนี้ โดยระบุได้สูงสุด 5 ค่า หากไม่ได้ระบุประเภท ระบบจะแสดงผลสถานที่ทุกประเภท แอตทริบิวต์ HTML:
|
includedRegionCodes |
ประเภท:
Array<string> optionalรวมเฉพาะผลการค้นหาในภูมิภาคที่ระบุ ซึ่งระบุเป็นรหัสภูมิภาค CLDR แบบ 2 อักขระได้สูงสุด 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:
|
placeholder |
ประเภท:
stringข้อความตัวยึดตำแหน่งที่จะแสดงในองค์ประกอบอินพุต |
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:
|
value |
ประเภท:
stringค่าขององค์ประกอบอินพุต |
สล็อต | |
|---|---|
prediction-item-icon |
ช่องนี้ยอมรับองค์ประกอบ <template> เพียงรายการเดียวเพื่อแสดงผลเป็นไอคอนที่แสดงข้างรายการการคาดคะเน |
ชิ้นส่วน | |
|---|---|
input |
องค์ประกอบอินพุตสำหรับองค์ประกอบการเติมข้อความอัตโนมัติ |
prediction-item |
รายการในเมนูแบบเลื่อนลงของการคาดคะเนที่แสดงการคาดคะเนเดียว |
prediction-item-icon |
ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในรายการการคาดคะเน |
prediction-item-main-text |
ส่วนของรายการการคาดคะเนซึ่งเป็นข้อความหลักของการคาดคะเน สำหรับสถานที่ตั้งทางภูมิศาสตร์ ข้อมูลนี้จะประกอบด้วยชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อถนนและหมายเลข เช่น "10 King Street" โดยค่าเริ่มต้น prediction-item-main-text จะเป็นสีดำ หากมีข้อความเพิ่มเติมใน prediction-item ข้อความนั้นจะอยู่นอก prediction-item-main-text และรับการจัดรูปแบบจาก prediction-item โดยจะมีสีเทาเป็นค่าเริ่มต้น โดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่ |
prediction-item-match |
ส่วนของการคาดคะเนที่แสดงผลซึ่งตรงกับข้อมูลที่ผู้ใช้ป้อน โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นการทำข้อความเป็นตัวหนา โปรดทราบว่าข้อความที่ตรงกันอาจอยู่ตรงไหนก็ได้ภายใน prediction-item โดยไม่จำเป็นต้องเป็นส่วนหนึ่งของ prediction-item-main-text |
prediction-item-selected |
รายการเมื่อผู้ใช้ไปยังส่วนต่างๆ โดยใช้แป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะได้รับผลกระทบจากทั้งรูปแบบส่วนนี้และรูปแบบส่วนรายการการคาดคะเน |
prediction-list |
องค์ประกอบภาพที่มีรายการการคาดคะเนที่แสดงผลโดยบริการ Place Autocomplete รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้ PlaceAutocompleteElement |
พร็อพเพอร์ตี้ CSS | |
|---|---|
background-color |
ลบล้างสีพื้นหลังขององค์ประกอบ |
border |
ลบล้างเส้นขอบขององค์ประกอบ |
border-radius |
ลบล้างรัศมีเส้นขอบขององค์ประกอบ |
color |
ลบล้างแบบอักษรขององค์ประกอบ |
color-scheme |
ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark |
font |
ลบล้างแบบอักษรขององค์ประกอบ |
font-family |
ลบล้างแบบอักษรขององค์ประกอบ |
font-size |
ลบล้างแบบอักษรขององค์ประกอบ |
font-style |
ลบล้างแบบอักษรขององค์ประกอบ |
font-weight |
ลบล้างแบบอักษรขององค์ประกอบ |
line-height |
ลบล้างแบบอักษรขององค์ประกอบ |
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
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
พร็อพเพอร์ตี้ | |
|---|---|
includedPrimaryTypes optional |
ประเภท:
Array<string> optional |
includedRegionCodes optional |
ประเภท:
Array<string> optional |
locationBias optional |
ประเภท:
LocationBias optional |
locationRestriction optional |
ประเภท:
LocationRestriction optional |
name optional |
ประเภท:
string optional |
origin optional |
ประเภท:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
ประเภท:
string optional |
requestedRegion optional |
ประเภท:
string optional |
unitSystem optional |
ประเภท:
UnitSystem optional |
value optional |
ประเภท:
string optionalค่าขององค์ประกอบอินพุต |
คลาส PlacePredictionSelectEvent
ชั้นเรียน
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 |
คลาส BasicPlaceAutocompleteElement
ชั้นเรียน
google.maps.places.BasicPlaceAutocompleteElement
BasicPlaceAutocompleteElement เป็นคลาสย่อย HTMLElement ซึ่งมีคอมโพเนนต์ UI สำหรับ Places Autocomplete API
องค์ประกอบที่กำหนดเอง:
<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-basic-place-autocomplete>
คลาสนี้ขยาย
HTMLElement
คลาสนี้ใช้ BasicPlaceAutocompleteElementOptions
เข้าถึงโดยโทรไปที่ const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
BasicPlaceAutocompleteElement |
BasicPlaceAutocompleteElement(options)พารามิเตอร์
|
พร็อพเพอร์ตี้ | |
|---|---|
includedPrimaryTypes |
ประเภท:
Array<string> optionalประเภทสถานที่หลักที่รวมอยู่ (เช่น "ร้านอาหาร" หรือ "ปั๊มน้ำมัน")
ระบบจะแสดงผลสถานที่ก็ต่อเมื่อประเภทหลักของสถานที่นั้นรวมอยู่ในรายการนี้ โดยระบุได้สูงสุด 5 ค่า หากไม่ได้ระบุประเภท ระบบจะแสดงผลสถานที่ทุกประเภท แอตทริบิวต์ HTML:
|
includedRegionCodes |
ประเภท:
Array<string> optionalรวมเฉพาะผลการค้นหาในภูมิภาคที่ระบุ ซึ่งระบุเป็นรหัสภูมิภาค CLDR แบบ 2 อักขระได้สูงสุด 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-icon |
ช่องนี้ยอมรับองค์ประกอบ <template> เพียงรายการเดียวเพื่อแสดงผลเป็นไอคอนที่แสดงข้างรายการการคาดคะเน |
ชิ้นส่วน | |
|---|---|
input |
องค์ประกอบอินพุตสำหรับองค์ประกอบการเติมข้อความอัตโนมัติ |
prediction-item |
รายการในเมนูแบบเลื่อนลงของการคาดคะเนที่แสดงการคาดคะเนเดียว |
prediction-item-icon |
ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในรายการการคาดคะเน |
prediction-item-main-text |
ส่วนของรายการการคาดคะเนซึ่งเป็นข้อความหลักของการคาดคะเน สำหรับสถานที่ตั้งทางภูมิศาสตร์ ข้อมูลนี้จะประกอบด้วยชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อถนนและหมายเลข เช่น "10 King Street" โดยค่าเริ่มต้น prediction-item-main-text จะเป็นสีดำ หากมีข้อความเพิ่มเติมใน prediction-item ข้อความนั้นจะอยู่นอก prediction-item-main-text และรับการจัดรูปแบบจาก prediction-item โดยจะมีสีเทาเป็นค่าเริ่มต้น โดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่ |
prediction-item-match |
ส่วนของการคาดคะเนที่แสดงผลซึ่งตรงกับข้อมูลที่ผู้ใช้ป้อน โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นการทำข้อความเป็นตัวหนา โปรดทราบว่าข้อความที่ตรงกันอาจอยู่ตรงไหนก็ได้ภายใน prediction-item โดยไม่จำเป็นต้องเป็นส่วนหนึ่งของ prediction-item-main-text |
prediction-item-selected |
รายการเมื่อผู้ใช้ไปยังส่วนต่างๆ โดยใช้แป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะได้รับผลกระทบจากทั้งรูปแบบส่วนนี้และรูปแบบส่วนรายการการคาดคะเน |
prediction-list |
องค์ประกอบภาพที่มีรายการการคาดคะเนที่แสดงผลโดยบริการ Place Autocomplete รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้ PlaceAutocompleteElement |
พร็อพเพอร์ตี้ CSS | |
|---|---|
background-color |
ลบล้างสีพื้นหลังขององค์ประกอบ |
border |
ลบล้างเส้นขอบขององค์ประกอบ |
border-radius |
ลบล้างรัศมีเส้นขอบขององค์ประกอบ |
color |
ลบล้างแบบอักษรขององค์ประกอบ |
color-scheme |
ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark |
font |
ลบล้างแบบอักษรขององค์ประกอบ |
font-family |
ลบล้างแบบอักษรขององค์ประกอบ |
font-size |
ลบล้างแบบอักษรขององค์ประกอบ |
font-style |
ลบล้างแบบอักษรขององค์ประกอบ |
font-weight |
ลบล้างแบบอักษรขององค์ประกอบ |
line-height |
ลบล้างแบบอักษรขององค์ประกอบ |
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
กิจกรรม | |
|---|---|
gmp-error |
function(errorEvent)อาร์กิวเมนต์
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์ |
gmp-select |
function(placeSelectEvent)อาร์กิวเมนต์
เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้เลือกการคาดคะเนสถานที่ มีออบเจ็กต์ Place |
อินเทอร์เฟซ BasicPlaceAutocompleteElementOptions
google.maps.places.BasicPlaceAutocompleteElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับการสร้าง BasicPlaceAutocompleteElement
พร็อพเพอร์ตี้ | |
|---|---|
includedPrimaryTypes optional |
ประเภท:
Array<string> optional |
includedRegionCodes optional |
ประเภท:
Array<string> optional |
locationBias optional |
ประเภท:
LocationBias optional |
locationRestriction optional |
ประเภท:
LocationRestriction optional |
name optional |
ประเภท:
string optional |
origin optional |
ประเภท:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
ประเภท:
string optional |
requestedRegion optional |
ประเภท:
string optional |
unitSystem optional |
ประเภท:
UnitSystem optional |
คลาส PlaceDetailsElement
ชั้นเรียน
google.maps.places.PlaceDetailsElement
แสดงรายละเอียดของสถานที่ในเลย์เอาต์แบบเต็ม เพิ่ม PlaceDetailsPlaceRequestElement หรือ PlaceDetailsLocationRequestElement เพื่อระบุตำแหน่งที่จะแสดงผล เพิ่ม PlaceContentConfigElement, PlaceStandardContentElement หรือ PlaceAllContentElement เพื่อระบุเนื้อหาที่จะแสดงผล
ตัวอย่างเช่น
<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> หากต้องการใช้องค์ประกอบนี้ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud
องค์ประกอบที่กำหนดเอง:
<gmp-place-details></gmp-place-details>
คลาสนี้ขยาย HTMLElement
คลาสนี้ใช้ PlaceDetailsElementOptions
เข้าถึงโดยโทรไปที่ const {PlaceDetailsElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceDetailsElement |
PlaceDetailsElement([options])พารามิเตอร์
|
พร็อพเพอร์ตี้ | |
|---|---|
place |
ประเภท:
Place optionalอ่านอย่างเดียว ออบเจ็กต์สถานที่ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลอยู่ในปัจจุบัน |
พร็อพเพอร์ตี้ CSS | |
|---|---|
--gmp-button-border-color |
สีเส้นขอบของปุ่ม "เปิดใน Maps" |
--gmp-button-border-radius |
รัศมีเส้นขอบของปุ่ม "เปิดใน Maps" |
--gmp-button-border-width |
ความกว้างของขอบปุ่ม "เปิดใน Maps" |
--gmp-collage-border-radius-outer |
รัศมีเส้นขอบของมุมด้านนอกของภาพคอลลาจสื่อ |
--gmp-dialog-border-radius |
รัศมีเส้นขอบของกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-color-disabled-surface |
สีพื้นผิวที่ต้องการสื่อถึงสถานะปิดใช้หรือไม่แสดงตน ใช้สำหรับดาวรีวิวที่ว่างเปล่า |
--gmp-mat-color-info |
สีขององค์ประกอบ UI ที่มีอารมณ์ความรู้สึกเชิงข้อมูล ใช้สำหรับไอคอนรถเข็น |
--gmp-mat-color-negative |
สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงลบ ใช้สำหรับข้อความ "ปิด" ในสถานะเปิดอยู่ตอนนี้ |
--gmp-mat-color-neutral-container |
สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่เติมสีแบบเรียบๆ ใช้สำหรับตัวยึดตำแหน่งรูปภาพและป้ายวันที่เผยแพร่รีวิว |
--gmp-mat-color-on-neutral-container |
สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์ที่เป็นกลาง ใช้สำหรับป้ายวันที่เผยแพร่รีวิวและป้ายความพร้อมให้บริการที่ชาร์จ EV เมื่อไม่พร้อมให้บริการ |
--gmp-mat-color-on-positive-container |
สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์เชิงบวก ใช้สำหรับป้ายความพร้อมให้บริการของที่ชาร์จ EV (หากมี) |
--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-positive-container |
สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่สื่อถึงความรู้สึกเชิงบวก ใช้สำหรับป้ายความพร้อมให้บริการของที่ชาร์จ EV (หากมี) |
--gmp-mat-color-primary |
สีของข้อความและไอคอนแบบอินเทอร์แอกทีฟตัดกับสีพื้นผิว ใช้สำหรับจำนวนรีวิว ลิงก์ในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps, ลิงก์เว็บไซต์, ไอคอนในแท็บภาพรวม และ (สีข้อความ/โฟกัส/วางเมาส์เหนือ) ในชื่อแถบแท็บ |
--gmp-mat-color-secondary-container |
สีเติมที่โดดเด่นน้อยกว่าเมื่อเทียบกับพื้นผิว สำหรับคอมโพเนนต์ที่ด้อยกว่า เช่น ปุ่มโทนสี ใช้สำหรับพื้นหลังของปุ่ม "เปิดใน Maps" |
--gmp-mat-color-surface |
สีสำหรับพื้นหลัง ใช้สำหรับพื้นหลังขององค์ประกอบและกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-font-body-medium |
ใช้สำหรับที่อยู่สถานที่ คะแนน ประเภท ราคา สถานะเปิดอยู่ เวลาทำการ รีวิว หมายเลขโทรศัพท์ เว็บไซต์ Plus Code ฟีเจอร์ยอดนิยม และเนื้อหาในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-font-body-small |
ใช้สำหรับข้อความเนื้อหาในรายการฟีเจอร์ในแท็บ "เกี่ยวกับ" |
--gmp-mat-font-display-small |
ใช้สำหรับชื่อสถานที่และข้อความสำหรับส่วนหัวของแต่ละฟีเจอร์ในแท็บ "เกี่ยวกับ" |
--gmp-mat-font-family |
ชุดแบบอักษรพื้นฐานที่ใช้สำหรับข้อความทั้งหมด |
--gmp-mat-font-headline-medium |
ใช้สำหรับข้อความส่วนหัวในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-font-label-large |
ใช้สำหรับชื่อแท็บ, ปุ่ม "เปิดใน Maps", ข้อความแสดงแหล่งที่มาของผู้รีวิวในแกลเลอรีรูปภาพ, ข้อความแสดงแหล่งที่มาของผู้รีวิวในส่วนรีวิว และลิงก์ในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-font-label-medium |
ใช้สำหรับป้ายจำนวนรูปภาพและป้ายวันที่เผยแพร่รีวิว |
--gmp-mat-font-title-small |
ใช้สำหรับชื่อของแต่ละส่วนในแท็บ "เกี่ยวกับ" |
--gmp-mat-spacing-extra-large |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-extra-small |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-large |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-medium |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-small |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-two-extra-large |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-star-rating-color |
สีของดาวที่เติมในคะแนน |
background-color |
ลบล้างสีพื้นหลังขององค์ประกอบ |
border |
ลบล้างเส้นขอบขององค์ประกอบ |
border-radius |
ลบล้างรัศมีเส้นขอบขององค์ประกอบ |
color-scheme |
ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark |
font-size |
ปรับขนาดข้อความและไอคอนทั้งหมดในองค์ประกอบ ซึ่งกำหนดไว้ภายในเป็น em ค่าเริ่มต้นคือ 16px |
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
กิจกรรม | |
|---|---|
gmp-error |
function(event)อาร์กิวเมนต์
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์ |
gmp-load |
function(event)อาร์กิวเมนต์
ระบบจะเริ่มเหตุการณ์นี้เมื่อองค์ประกอบโหลดและแสดงผลเนื้อหา เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์ |
อินเทอร์เฟซ PlaceDetailsElementOptions
google.maps.places.PlaceDetailsElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceDetailsElement
คลาส PlaceDetailsCompactElement
ชั้นเรียน
google.maps.places.PlaceDetailsCompactElement
แสดงรายละเอียดของสถานที่ในเลย์เอาต์ขนาดกะทัดรัด เพิ่ม PlaceDetailsPlaceRequestElement หรือ PlaceDetailsLocationRequestElement เพื่อระบุตำแหน่งที่จะแสดงผล เพิ่ม PlaceContentConfigElement, PlaceStandardContentElement หรือ PlaceAllContentElement เพื่อระบุเนื้อหาที่จะแสดงผล
ตัวอย่างเช่น
<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> หากต้องการใช้องค์ประกอบนี้ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud
องค์ประกอบที่กำหนดเอง:
<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หากเป็นจริง ระบบจะตัดชื่อและที่อยู่ของสถานที่ให้พอดีกับบรรทัดเดียวแทนที่จะตัดขึ้นบรรทัดใหม่
แอตทริบิวต์ HTML:
|
พร็อพเพอร์ตี้ CSS | |
|---|---|
--gmp-button-border-color |
สีเส้นขอบของปุ่ม "เปิดใน Maps" |
--gmp-button-border-radius |
รัศมีเส้นขอบของปุ่ม "เปิดใน Maps" |
--gmp-button-border-width |
ความกว้างของขอบปุ่ม "เปิดใน Maps" |
--gmp-dialog-border-radius |
รัศมีเส้นขอบของกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--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 |
สีของข้อความและไอคอนแบบอินเทอร์แอกทีฟตัดกับสีพื้นผิว ใช้สำหรับจำนวนรีวิว รวมถึงลิงก์ในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-color-secondary-container |
สีเติมที่โดดเด่นน้อยกว่าเมื่อเทียบกับพื้นผิว สำหรับคอมโพเนนต์ที่ด้อยกว่า เช่น ปุ่มโทนสี ใช้สำหรับพื้นหลังของปุ่ม "เปิดใน Maps" |
--gmp-mat-color-surface |
สีสำหรับพื้นหลัง ใช้สำหรับพื้นหลังขององค์ประกอบและกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-font-body-medium |
ใช้สำหรับข้อความเนื้อหาในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-font-body-small |
ใช้สำหรับที่อยู่ คะแนน ประเภท ราคา และสถานะเปิดอยู่ของสถานที่ |
--gmp-mat-font-family |
ชุดแบบอักษรพื้นฐานที่ใช้สำหรับข้อความทั้งหมด |
--gmp-mat-font-headline-medium |
ใช้สำหรับข้อความส่วนหัวในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-font-label-large |
ใช้สำหรับปุ่ม "เปิดใน Maps" รวมถึงลิงก์ในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps และข้อความแสดงแหล่งที่มาของผู้ตรวจสอบในแกลเลอรีรูปภาพ |
--gmp-mat-font-label-medium |
ใช้สำหรับป้ายจำนวนรูปภาพ |
--gmp-mat-font-title-small |
ใช้สำหรับชื่อสถานที่ |
--gmp-mat-spacing-extra-small |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-large |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-medium |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-small |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-star-rating-color |
สีของดาวที่เติมในคะแนน |
--gmp-thumbnail-border-radius |
รัศมีเส้นขอบของภาพขนาดย่อของสถานที่ |
background-color |
ลบล้างสีพื้นหลังขององค์ประกอบ |
border |
ลบล้างเส้นขอบขององค์ประกอบ |
border-radius |
ลบล้างรัศมีเส้นขอบขององค์ประกอบ |
color-scheme |
ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark |
font-size |
ปรับขนาดข้อความและไอคอนทั้งหมดในองค์ประกอบ ซึ่งกำหนดไว้ภายในเป็น em ค่าเริ่มต้นคือ 16px |
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
กิจกรรม | |
|---|---|
gmp-error |
function(event)อาร์กิวเมนต์
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์ |
gmp-load |
function(event)อาร์กิวเมนต์
ระบบจะเริ่มเหตุการณ์นี้เมื่อองค์ประกอบโหลดและแสดงผลเนื้อหา เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์ |
อินเทอร์เฟซ PlaceDetailsCompactElementOptions
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
ชั้นเรียน
google.maps.places.PlaceDetailsPlaceRequestElement
กำหนดค่า PlaceDetailsCompactElement หรือ PlaceDetailsElement เพื่อโหลดข้อมูลตามออบเจ็กต์สถานที่ รหัส หรือชื่อทรัพยากร เพิ่มองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceDetailsCompactElement หรือ PlaceDetailsElement เพื่อโหลดข้อมูลสำหรับสถานที่ที่ระบุ เช่น
<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="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ค่าเริ่มต้น:
nullออบเจ็กต์ รหัส หรือชื่อทรัพยากรของสถานที่ที่จะแสดงรายละเอียดในองค์ประกอบรายละเอียดสถานที่แบบกะทัดรัด พร็อพเพอร์ตี้นี้จะแสดงแอตทริบิวต์เป็นชื่อทรัพยากร
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
อินเทอร์เฟซ PlaceDetailsPlaceRequestElementOptions
google.maps.places.PlaceDetailsPlaceRequestElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceDetailsPlaceRequestElement
พร็อพเพอร์ตี้ | |
|---|---|
place optional |
ประเภท:
Place|string optional |
คลาส PlaceDetailsLocationRequestElement
ชั้นเรียน
google.maps.places.PlaceDetailsLocationRequestElement
กำหนดค่า PlaceDetailsCompactElement หรือ PlaceDetailsElement เพื่อโหลดข้อมูลตามตำแหน่ง เพิ่มองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceDetailsCompactElement หรือ PlaceDetailsElement เพื่อโหลดข้อมูลสำหรับตำแหน่งที่ระบุ เช่น
<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>
คลาสนี้ขยาย
HTMLElement
คลาสนี้ใช้ PlaceDetailsLocationRequestElementOptions
เข้าถึงโดยโทรไปที่ const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceDetailsLocationRequestElement |
PlaceDetailsLocationRequestElement([options])พารามิเตอร์
|
พร็อพเพอร์ตี้ | |
|---|---|
location |
ประเภท:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalค่าเริ่มต้น:
nullตำแหน่งที่จะแสดงรายละเอียดในองค์ประกอบรายละเอียดสถานที่ ปรับให้เป็น
LatLngAltitudeแอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
อินเทอร์เฟซ PlaceDetailsLocationRequestElementOptions
google.maps.places.PlaceDetailsLocationRequestElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceDetailsLocationRequestElement
พร็อพเพอร์ตี้ | |
|---|---|
location optional |
ประเภท:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalสถานที่ตั้งที่จะแสดงสถานที่ |
คลาส PlaceSearchElement
ชั้นเรียน
google.maps.places.PlaceSearchElement
แสดงผลการค้นหาสถานที่ในรายการ เพิ่ม PlaceTextSearchRequestElement หรือ PlaceNearbySearchRequestElement เพื่อระบุคำขอแสดงผลลัพธ์ เพิ่ม PlaceContentConfigElement, PlaceStandardContentElement หรือ PlaceAllContentElement เพื่อระบุเนื้อหาที่จะแสดงผล
ตัวอย่างเช่น
<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> หากต้องการใช้องค์ประกอบการค้นหาสถานที่ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud
องค์ประกอบที่กำหนดเอง:
<gmp-place-search attribution-position="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>
คลาสนี้ขยาย
HTMLElement
คลาสนี้ใช้ PlaceSearchElementOptions
เข้าถึงโดยโทรไปที่ const {PlaceSearchElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceSearchElement |
PlaceSearchElement([options])พารามิเตอร์
|
พร็อพเพอร์ตี้ | |
|---|---|
attributionPosition |
ประเภท:
PlaceSearchAttributionPosition optionalค่าเริ่มต้น:
PlaceSearchAttributionPosition.TOPตำแหน่งของโลโก้การระบุแหล่งที่มาและปุ่มการเปิดเผยทางกฎหมาย
แอตทริบิวต์ HTML:
|
orientation |
ประเภท:
PlaceSearchOrientation optionalค่าเริ่มต้น:
PlaceSearchOrientation.VERTICALตัวแปรการวางแนว (แนวตั้งหรือแนวนอน) ขององค์ประกอบ
แอตทริบิวต์ HTML:
|
places |
อ่านอย่างเดียว อาร์เรย์ของออบเจ็กต์ Place ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลอยู่ในปัจจุบัน |
selectable |
ประเภท:
boolean optionalค่าเริ่มต้น:
falseรายการในลิสต์เลือกได้หรือไม่ หากเป็นจริง รายการจะเป็นปุ่มที่ส่งเหตุการณ์
gmp-select เมื่อคลิก นอกจากนี้ยังรองรับการไปยังส่วนต่างๆ และการเลือกด้วยแป้นพิมพ์ที่เข้าถึงได้ด้วยแอตทริบิวต์ HTML:
|
truncationPreferred |
ประเภท:
boolean optionalค่าเริ่มต้น:
falseหากเป็น "จริง" ระบบจะตัดเนื้อหาบางบรรทัดให้พอดีกับบรรทัดเดียวแทนที่จะตัดขึ้นบรรทัดใหม่
แอตทริบิวต์ HTML:
|
พร็อพเพอร์ตี้ CSS | |
|---|---|
--gmp-button-border-color |
สีเส้นขอบของปุ่ม "เปิดใน Maps" |
--gmp-button-border-radius |
รัศมีของเส้นขอบสำหรับปุ่ม "เปิดใน Maps" |
--gmp-button-border-width |
ความกว้างของขอบสำหรับปุ่ม "เปิดใน Maps" |
--gmp-card-border-radius |
รัศมีของเส้นขอบสำหรับการ์ดสถานที่ |
--gmp-dialog-border-radius |
รัศมีของเส้นขอบสำหรับกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps |
--gmp-mat-color-info |
สีขององค์ประกอบ UI ที่มีอารมณ์ความรู้สึกเชิงข้อมูล ใช้สำหรับไอคอนทางเข้าที่รองรับเก้าอี้รถเข็น |
--gmp-mat-color-negative |
สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงลบ ใช้สำหรับป้ายกำกับ "ปิด" สำหรับเวลาทำการของสถานที่ |
--gmp-mat-color-neutral-container |
สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่เติมสีแบบเรียบๆ ใช้สำหรับป้ายวันที่ของรีวิวและรูปร่างตัวยึดตำแหน่งการโหลด |
--gmp-mat-color-on-neutral-container |
สีของข้อความและไอคอนในคอนเทนเนอร์สีกลาง ใช้สำหรับข้อความวันที่ตรวจสอบและข้อความแสดงข้อผิดพลาดในการโหลด |
--gmp-mat-color-on-secondary-container |
สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์รอง ใช้สำหรับข้อความและไอคอนของปุ่ม |
--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 |
สีเติมที่โดดเด่นน้อยกว่าเมื่อเทียบกับพื้นผิว ใช้สำหรับพื้นหลังของปุ่ม |
--gmp-mat-color-surface |
สีสำหรับพื้นหลัง ใช้สำหรับพื้นหลังคอนเทนเนอร์และกล่องโต้ตอบ |
--gmp-mat-font-body-small |
ใช้สำหรับข้อมูลสถานที่ |
--gmp-mat-font-family |
ชุดแบบอักษรพื้นฐานสำหรับข้อความทั้งหมด |
--gmp-mat-font-headline-medium |
ใช้สำหรับส่วนหัวของกล่องโต้ตอบ |
--gmp-mat-font-label-large |
ใช้สำหรับเนื้อหาของปุ่ม |
--gmp-mat-font-title-medium |
ใช้สำหรับชื่อสถานที่ |
--gmp-mat-spacing-extra-small |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-large |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-medium |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-mat-spacing-small |
ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ |
--gmp-star-rating-color |
สีของดาวที่เติมในการให้ดาว |
--gmp-thumbnail-border-radius |
รัศมีเส้นขอบสำหรับภาพขนาดย่อของสถานที่ |
background-color |
ลบล้างสีพื้นหลังขององค์ประกอบ |
border |
ลบล้างเส้นขอบขององค์ประกอบ |
border-radius |
ลบล้างรัศมีเส้นขอบขององค์ประกอบ |
color-scheme |
ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark |
font-size |
ปรับขนาดข้อความและไอคอนทั้งหมดในองค์ประกอบ ค่าเริ่มต้นคือ 16px |
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
กิจกรรม | |
|---|---|
gmp-error |
function(event)อาร์กิวเมนต์
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์ |
gmp-load |
function(event)อาร์กิวเมนต์
ระบบจะเริ่มเหตุการณ์นี้เมื่อองค์ประกอบโหลดและแสดงผลเนื้อหา เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์ |
gmp-select |
function(event)อาร์กิวเมนต์
เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการเลือกสถานที่จากรายการ มีออบเจ็กต์ Place ที่มีรหัส สถานที่ตั้ง และวิวพอร์ตของสถานที่ที่เลือก |
อินเทอร์เฟซ PlaceSearchElementOptions
google.maps.places.PlaceSearchElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceSearchElement
พร็อพเพอร์ตี้ | |
|---|---|
attributionPosition optional |
ประเภท:
PlaceSearchAttributionPosition optional |
orientation optional |
ประเภท:
PlaceSearchOrientation optional |
selectable optional |
ประเภท:
boolean optional |
truncationPreferred optional |
ประเภท:
boolean optional |
ค่าคงที่ PlaceSearchAttributionPosition
google.maps.places.PlaceSearchAttributionPosition
ค่าคงที่
ตำแหน่งการระบุแหล่งที่มาสำหรับ PlaceSearchElement
เข้าถึงโดยโทรไปที่ const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ค่าคงที่ | |
|---|---|
BOTTOM |
การระบุแหล่งที่มาที่ด้านล่างของ PlaceSearchElement |
TOP |
การระบุแหล่งที่มาที่ด้านบนของ PlaceSearchElement |
ค่าคงที่ PlaceSearchOrientation
google.maps.places.PlaceSearchOrientation
ค่าคงที่
ตัวแปรการวางแนวสำหรับ PlaceSearchElement
เข้าถึงโดยโทรไปที่ const {PlaceSearchOrientation} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ค่าคงที่ | |
|---|---|
HORIZONTAL |
การวางแนวนอน |
VERTICAL |
การวางแนวตั้ง |
คลาส PlaceSelectEvent
ชั้นเรียน
google.maps.places.PlaceSelectEvent
เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการเลือกสถานที่จากรายการสถานที่ เข้าถึงรายการที่เลือกด้วย event.place
คลาสนี้ขยาย
Event
เข้าถึงโดยโทรไปที่ const {PlaceSelectEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
พร็อพเพอร์ตี้ | |
|---|---|
place |
ประเภท:
Placeสถานที่ที่เลือก |
คลาส PlaceNearbySearchRequestElement
ชั้นเรียน
google.maps.places.PlaceNearbySearchRequestElement
กำหนดค่า PlaceSearchElement เพื่อโหลดผลลัพธ์ตามคำขอการค้นหาในบริเวณใกล้เคียง ต้องระบุพร็อพเพอร์ตี้ locationRestriction เพื่อให้องค์ประกอบการค้นหาโหลด ระบบจะไม่สนใจพร็อพเพอร์ตี้อื่นๆ ที่กำหนดค่าไว้หากไม่ได้ตั้งค่า locationRestriction เพิ่มองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceSearchElement เพื่อโหลดผลลัพธ์ เช่น
<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="preference"></gmp-place-nearby-search-request>
คลาสนี้ขยาย
HTMLElement
คลาสนี้ใช้ PlaceNearbySearchRequestElementOptions
เข้าถึงโดยโทรไปที่ const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceNearbySearchRequestElement |
PlaceNearbySearchRequestElement([options])พารามิเตอร์
|
พร็อพเพอร์ตี้ | |
|---|---|
excludedPrimaryTypes |
ประเภท:
Array<string> optionalค่าเริ่มต้น:
nullประเภทสถานที่หลักที่ยกเว้น
แอตทริบิวต์ HTML:
|
excludedTypes |
ประเภท:
Array<string> optionalค่าเริ่มต้น:
nullประเภทสถานที่ที่ยกเว้น
แอตทริบิวต์ HTML:
|
includedPrimaryTypes |
ประเภท:
Array<string> optionalค่าเริ่มต้น:
nullรวมประเภทสถานที่หลักแล้ว
แอตทริบิวต์ HTML:
|
includedTypes |
ประเภท:
Array<string> optionalค่าเริ่มต้น:
nullประเภทสถานที่ที่รวมไว้
แอตทริบิวต์ HTML:
|
locationRestriction |
ประเภท:
Circle|CircleLiteral optionalค่าเริ่มต้น:
nullภูมิภาคที่จะค้นหา ปรับให้เป็น
Circleแอตทริบิวต์ HTML:
|
maxResultCount |
ประเภท:
number optionalค่าเริ่มต้น:
nullจำนวนผลลัพธ์สูงสุดที่จะแสดง
แอตทริบิวต์ HTML:
|
rankPreference |
ประเภท:
SearchNearbyRankPreference optionalค่าเริ่มต้น:
nullวิธีจัดอันดับผลลัพธ์ในการตอบกลับ
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
อินเทอร์เฟซ PlaceNearbySearchRequestElementOptions
google.maps.places.PlaceNearbySearchRequestElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceNearbySearchRequestElement
คลาส PlaceTextSearchRequestElement
ชั้นเรียน
google.maps.places.PlaceTextSearchRequestElement
กำหนดค่า PlaceSearchElement เพื่อโหลดผลลัพธ์ตามคำขอการค้นหาข้อความ ต้องระบุพร็อพเพอร์ตี้ textQuery เพื่อให้องค์ประกอบการค้นหาโหลด ระบบจะไม่สนใจพร็อพเพอร์ตี้อื่นๆ ที่กำหนดค่าไว้หากไม่ได้ตั้งค่า textQuery เพิ่มองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceSearchElement เพื่อโหลดผลลัพธ์ เช่น
<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="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>
คลาสนี้ขยาย
HTMLElement
คลาสนี้ใช้ PlaceTextSearchRequestElementOptions
เข้าถึงโดยโทรไปที่ const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ผู้ผลิต | |
|---|---|
PlaceTextSearchRequestElement |
PlaceTextSearchRequestElement([options])พารามิเตอร์
|
พร็อพเพอร์ตี้ | |
|---|---|
evConnectorTypes |
ประเภท:
Array<EVConnectorType> optionalค่าเริ่มต้น:
nullรายการประเภทหัวชาร์จไฟฟ้า EV ที่ต้องการ
แอตทริบิวต์ HTML:
|
evMinimumChargingRateKw |
ประเภท:
number optionalค่าเริ่มต้น:
nullอัตราการชาร์จขั้นต่ำที่จำเป็นในหน่วยกิโลวัตต์
แอตทริบิวต์ HTML:
|
includedType |
ประเภท:
string optionalค่าเริ่มต้น:
nullประเภทสถานที่ที่ขอ
แอตทริบิวต์ HTML:
|
isOpenNow |
ประเภท:
boolean optionalค่าเริ่มต้น:
nullใช้เพื่อจำกัดการค้นหาเฉพาะสถานที่ที่เปิดอยู่ในปัจจุบัน
แอตทริบิวต์ HTML:
|
locationBias |
ประเภท:
LocationBias optionalค่าเริ่มต้น:
nullการให้น้ำหนักพิเศษกับบางตำแหน่งสำหรับการค้นหา ปรับให้เป็น
LatLngAltitude | LatLngBounds | Circle | stringแอตทริบิวต์ HTML:
|
locationRestriction |
ประเภท:
LatLngBounds|LatLngBoundsLiteral optionalค่าเริ่มต้น:
nullการจำกัดสถานที่สำหรับการค้นหา ปรับให้เป็น
LatLngBoundsแอตทริบิวต์ HTML:
|
maxResultCount |
ประเภท:
number optionalค่าเริ่มต้น:
nullจำนวนผลลัพธ์สูงสุดที่จะแสดง
แอตทริบิวต์ HTML:
|
minRating |
ประเภท:
number optionalค่าเริ่มต้น:
nullกรองผลลัพธ์ที่การให้คะแนนของผู้ใช้เฉลี่ยน้อยกว่าขีดจำกัดนี้อย่างเคร่งครัด
แอตทริบิวต์ HTML:
|
priceLevels |
ประเภท:
Array<PriceLevel> optionalค่าเริ่มต้น:
nullใช้เพื่อจำกัดการค้นหาเฉพาะสถานที่ที่มีการทำเครื่องหมายว่ามีระดับราคาที่แน่นอน
แอตทริบิวต์ HTML:
|
rankPreference |
ประเภท:
SearchByTextRankPreference optionalค่าเริ่มต้น:
nullวิธีจัดอันดับผลลัพธ์ในการตอบกลับ
แอตทริบิวต์ HTML:
|
textQuery |
ประเภท:
string optionalค่าเริ่มต้น:
nullคำค้นหาที่เป็นข้อความสำหรับการค้นหาข้อความ
แอตทริบิวต์ HTML:
|
useStrictTypeFiltering |
ประเภท:
boolean optionalค่าเริ่มต้น:
nullใช้เพื่อตั้งค่าการกรองประเภทที่เข้มงวดสำหรับ "includedType"
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
อินเทอร์เฟซ PlaceTextSearchRequestElementOptions
google.maps.places.PlaceTextSearchRequestElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceTextSearchRequestElement
พร็อพเพอร์ตี้ | |
|---|---|
evConnectorTypes optional |
ประเภท:
Array<EVConnectorType> optionalรายการประเภทหัวชาร์จไฟฟ้า EV ที่ต้องการ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.evSearchOptions และ PlaceTextSearchRequestElement.evConnectorTypes |
evMinimumChargingRateKw optional |
ประเภท:
number optionalอัตราการชาร์จขั้นต่ำที่จำเป็นในหน่วยกิโลวัตต์ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.evSearchOptions และ PlaceTextSearchRequestElement.evMinimumChargingRateKw |
includedType optional |
ประเภท:
string optionalประเภทสถานที่ที่ขอ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.includedType และ PlaceTextSearchRequestElement.includedType |
isOpenNow optional |
ประเภท:
boolean optionalใช้เพื่อจำกัดการค้นหาเฉพาะสถานที่ที่เปิดอยู่ในปัจจุบัน ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.isOpenNow และ PlaceTextSearchRequestElement.isOpenNow |
locationBias optional |
ประเภท:
LocationBias optionalการให้น้ำหนักพิเศษกับบางตำแหน่งสำหรับการค้นหา ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.locationBias และ PlaceTextSearchRequestElement.locationBias |
locationRestriction optional |
ประเภท:
LatLngBounds|LatLngBoundsLiteral optionalการจำกัดสถานที่สำหรับการค้นหา ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.locationRestriction และ PlaceTextSearchRequestElement.locationRestriction |
maxResultCount optional |
ประเภท:
number optionalจำนวนผลลัพธ์สูงสุดที่จะแสดง ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.maxResultCount และ PlaceTextSearchRequestElement.maxResultCount |
minRating optional |
ประเภท:
number optionalกรองผลลัพธ์ที่การให้คะแนนของผู้ใช้เฉลี่ยน้อยกว่าขีดจำกัดนี้อย่างเคร่งครัด ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.minRating และ PlaceTextSearchRequestElement.minRating |
priceLevels optional |
ประเภท:
Array<PriceLevel> optionalใช้เพื่อจำกัดการค้นหาเฉพาะสถานที่ที่มีการทำเครื่องหมายว่ามีระดับราคาที่แน่นอน ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.priceLevels และ PlaceTextSearchRequestElement.priceLevels |
rankPreference optional |
ประเภท:
SearchByTextRankPreference optionalวิธีจัดอันดับผลลัพธ์ในการตอบกลับ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.rankPreference และ PlaceTextSearchRequestElement.rankPreference |
textQuery optional |
ประเภท:
string optionalคำค้นหาที่เป็นข้อความสำหรับการค้นหาข้อความ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.textQuery และ PlaceTextSearchRequestElement.textQuery |
useStrictTypeFiltering optional |
ประเภท:
boolean optionalใช้เพื่อตั้งค่าการกรองประเภทที่เข้มงวดสำหรับ SearchByTextRequest.includedType ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.useStrictTypeFiltering และ PlaceTextSearchRequestElement.useStrictTypeFiltering |
คลาส Autocomplete
ชั้นเรียน
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 สตับ โดยตั้งค่าพร็อพเพอร์ตี้ 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
ชั้นเรียน
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พื้นที่ที่ต้องการให้น้ำหนักการคาดคะเนการค้นหา การคาดคะเนจะเอนเอียงไปทางคำค้นหาที่กำหนดเป้าหมายขอบเขตเหล่านี้ แต่ไม่จำกัดเพียงคำค้นหาดังกล่าว |
คลาส PlaceContextualElement
ชั้นเรียน
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
ผู้ผลิต | |
|---|---|
PlaceContextualElement |
PlaceContextualElement([options])พารามิเตอร์
|
พร็อพเพอร์ตี้ | |
|---|---|
contextToken |
ประเภท:
string optionalโทเค็นบริบท
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
อินเทอร์เฟซ PlaceContextualElementOptions
google.maps.places.PlaceContextualElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceContextualElement
พร็อพเพอร์ตี้ | |
|---|---|
contextToken optional |
ประเภท:
string optionalโทเค็นบริบทที่ได้จากการตอบกลับของการเชื่อมต่อแหล่งข้อมูลกับ Google Maps |
คลาส PlaceContextualListConfigElement
ชั้นเรียน
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
ผู้ผลิต | |
|---|---|
PlaceContextualListConfigElement |
PlaceContextualListConfigElement([options])พารามิเตอร์
|
พร็อพเพอร์ตี้ | |
|---|---|
layout |
ประเภท:
PlaceContextualListLayout optionalเลย์เอาต์
แอตทริบิวต์ HTML:
|
mapHidden |
ประเภท:
boolean optionalมีการซ่อนแผนที่หรือไม่
แอตทริบิวต์ HTML:
|
เมธอด | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อมีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options])พารามิเตอร์
ค่าที่แสดงผล:
voidนำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
อินเทอร์เฟซ PlaceContextualListConfigElementOptions
google.maps.places.PlaceContextualListConfigElementOptions
อินเทอร์เฟซ
ตัวเลือกสำหรับ PlaceContextualListConfigElement
พร็อพเพอร์ตี้ | |
|---|---|
layout optional |
ประเภท:
PlaceContextualListLayout optionalค่าเริ่มต้น:
PlaceContextualListLayout.VERTICALเลย์เอาต์ |
mapHidden optional |
ประเภท:
boolean optionalค่าเริ่มต้น:
falseเป็นจริงหากควรซ่อนแผนที่ |
ค่าคงที่ PlaceContextualListLayout
google.maps.places.PlaceContextualListLayout
ค่าคงที่
รายการเลย์เอาต์ที่องค์ประกอบตามบริบทของสถานที่รองรับสำหรับมุมมองรายการ
เข้าถึงโดยโทรไปที่ const {PlaceContextualListLayout} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
ค่าคงที่ | |
|---|---|
COMPACT |
เลย์เอาต์แบบรายการขนาดกะทัดรัด: รายการจะแสดงเป็นลิงก์ในบรรทัดเดียว โดยมีรายการที่เกินมาอยู่ในรายการแบบเลื่อนลง |
VERTICAL |
เลย์เอาต์แบบรายการแนวตั้ง: รายการจะแสดงผลเป็นการ์ดในรายการแนวตั้ง |