Places Widgets

PlaceAutocompleteElement class

google.maps.places.PlaceAutocompleteElement ชั้นเรียน

PlaceAutocompleteElement เป็นHTMLElementคลาสย่อยที่ให้คอมโพเนนต์ UI สำหรับ Places Autocomplete API

องค์ประกอบที่กำหนดเอง:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng|lat,lng,altitude" requested-language="string" requested-region="string" unit-system="metric|imperial" types="type1 type2 type3..."></gmp-place-autocomplete>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceAutocompleteElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API

พร็อพเพอร์ตี้
includedPrimaryTypes	ประเภท:  Array<string> optional ประเภทสถานที่หลักที่รวมไว้ (เช่น "restaurant" หรือ "gas_station") ระบบจะแสดงสถานที่ก็ต่อเมื่อประเภทหลักของสถานที่นั้นรวมอยู่ในรายการนี้ โดยระบุได้สูงสุด 5 ค่า หากไม่ได้ระบุประเภท ระบบจะแสดงผลสถานที่ทุกประเภท แอตทริบิวต์ HTML: <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes	ประเภท:  Array<string> optional รวมเฉพาะผลการค้นหาในภูมิภาคที่ระบุ โดยระบุเป็นรหัสภูมิภาค 2 อักขระของ CLDR ได้สูงสุด 15 รายการ ชุดข้อมูลที่ว่างเปล่าจะไม่จำกัดผลลัพธ์ หากตั้งค่าทั้ง locationRestriction และ includedRegionCodes ผลลัพธ์จะอยู่ในพื้นที่ที่ทับซ้อนกัน แอตทริบิวต์ HTML: <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
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: <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin	ประเภท:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional ต้นทางที่จะคำนวณระยะทาง หากไม่ได้ระบุ ระบบจะไม่คำนวณระยะทาง ระบบจะไม่ใช้ระดับความสูงในการคำนวณหากมีการระบุ แอตทริบิวต์ HTML: <gmp-place-autocomplete origin="lat,lng|lat,lng,altitude"></gmp-place-autocomplete>
requestedLanguage	ประเภท:  string optional ตัวระบุภาษาสำหรับภาษาที่ควรแสดงผลลัพธ์ (หากเป็นไปได้) ผลการค้นหาในภาษาที่เลือกอาจได้รับการจัดอันดับสูงขึ้น แต่คำแนะนำไม่ได้จำกัดอยู่แค่ในภาษานี้ ดูรายการภาษาที่รองรับ แอตทริบิวต์ HTML: <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion	ประเภท:  string optional รหัสภูมิภาคที่ใช้สำหรับการจัดรูปแบบผลลัพธ์และการกรองผลลัพธ์ แต่ไม่ได้จำกัดการแนะนำไว้เฉพาะในประเทศนี้ รหัสภูมิภาคยอมรับค่า ccTLD ("โดเมนระดับบนสุด") ที่มีอักขระ 2 ตัว รหัส ccTLD ส่วนใหญ่จะเหมือนกับรหัส ISO 3166-1 แต่ก็มีข้อยกเว้นที่สำคัญบางประการ เช่น ccTLD ของสหราชอาณาจักรคือ "uk" (.co.uk) ขณะที่รหัส ISO 3166-1 คือ "gb" (ในทางเทคนิคสำหรับนิติบุคคล "สหราชอาณาจักรบริเตนใหญ่และไอร์แลนด์เหนือ") แอตทริบิวต์ HTML: <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
unitSystem	ประเภท:  UnitSystem optional ระบบหน่วยที่ใช้เพื่อแสดงระยะทาง หากไม่ได้ระบุ ระบบจะกำหนดระบบหน่วยตาม requestedRegion แอตทริบิวต์ HTML: <gmp-place-autocomplete unit-system="metric|imperial"></gmp-place-autocomplete>
componentRestrictions	ประเภท:  ComponentRestrictions optional ข้อจำกัดของคอมโพเนนต์ ข้อจำกัดของคอมโพเนนต์ใช้เพื่อจำกัดการคาดการณ์ให้เฉพาะภายในคอมโพเนนต์หลัก เช่น ประเทศ
types	ประเภท:  Array<string> optional ประเภทของการคาดการณ์ที่จะแสดง ดูประเภทที่รองรับได้ใน คู่มือสำหรับนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลประเภททั้งหมด แอตทริบิวต์ HTML: <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>

เมธอด
addEventListener	addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive ค่าที่ส่งคืน:  void ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener	removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์ options:  boolean|EventListenerOptions optional ดูตัวเลือก ค่าที่ส่งคืน:  void นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

PlaceAutocompleteElementOptions อินเทอร์เฟซ

google.maps.places.PlaceAutocompleteElementOptions อินเทอร์เฟซ

ตัวเลือกสำหรับการสร้าง PlaceAutocompleteElement ดูคำอธิบายของแต่ละพร็อพเพอร์ตี้ได้ในพร็อพเพอร์ตี้ที่มีชื่อเดียวกันในคลาส PlaceAutocompleteElement

พร็อพเพอร์ตี้
componentRestrictions optional	ประเภท:  ComponentRestrictions optional
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
types optional	ประเภท:  Array<string> optional
unitSystem optional	ประเภท:  UnitSystem optional

PlaceAutocompletePlaceSelectEvent class

google.maps.places.PlaceAutocompletePlaceSelectEvent ชั้นเรียน

เหตุการณ์นี้จะสร้างขึ้นหลังจากที่ผู้ใช้เลือกสถานที่ด้วยองค์ประกอบ Place Autocomplete เข้าถึงการเลือกด้วย event.place

ชั้นเรียนนี้ขยายเวลา Event

เข้าถึงได้โดยโทรไปที่ const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API

พร็อพเพอร์ตี้
place	ประเภท:  Place

PlacePredictionSelectEvent class

google.maps.places.PlacePredictionSelectEvent ชั้นเรียน

ระบบจะสร้างเหตุการณ์นี้หลังจากที่ผู้ใช้เลือกรายการการคาดคะเนด้วย PlaceAutocompleteElement เข้าถึงการเลือกด้วย event.placePrediction

ชั้นเรียนนี้ขยายเวลา Event

เข้าถึงได้โดยโทรไปที่ const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API

PlaceAutocompleteRequestErrorEvent class

google.maps.places.PlaceAutocompleteRequestErrorEvent ชั้นเรียน

เหตุการณ์นี้จะปล่อยโดย PlaceAutocompleteElement เมื่อมีปัญหาเกี่ยวกับคำขอเครือข่าย

ชั้นเรียนนี้ขยายเวลา Event

เข้าถึงได้โดยโทรไปที่ const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API

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

เมธอด
addEventListener	addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive ค่าที่ส่งคืน:  void ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
configureFromLocation	configureFromLocation(location) พารามิเตอร์:  location:  LatLng|LatLngLiteral ตำแหน่งที่จะแสดงรายละเอียดสถานที่ ค่าที่ส่งคืน:  Promise<void> สัญญาที่ได้รับการแก้ไขเมื่อโหลดและแสดงข้อมูลสถานที่แล้ว กำหนดค่าวิดเจ็ตจาก LatLng โดยใช้การเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับ
configureFromPlace	configureFromPlace(place) พารามิเตอร์:  place:  Place|{id:string} สถานที่ที่จะแสดงรายละเอียด ค่าที่ส่งคืน:  Promise<void> สัญญาที่ได้รับการแก้ไขเมื่อโหลดและแสดงข้อมูลสถานที่แล้ว กำหนดค่าวิดเจ็ตจากออบเจ็กต์ Place หรือรหัสสถานที่
removeEventListener	removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์ options:  boolean|EventListenerOptions optional ดูตัวเลือก ค่าที่ส่งคืน:  void นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

PlaceDetailsElementOptions อินเทอร์เฟซ

google.maps.places.PlaceDetailsElementOptions อินเทอร์เฟซ

ตัวเลือกสำหรับ PlaceDetailsElement

PlaceDetailsSize ค่าคงที่

google.maps.places.PlaceDetailsSize ค่าคงที่

รายละเอียดปลีกย่อยของขนาดสำหรับ PlaceDetailsElement

เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsSize} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API

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

เมธอด
addEventListener	addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive ค่าที่ส่งคืน:  void ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
configureFromSearchByTextRequest	configureFromSearchByTextRequest(request) พารามิเตอร์:  request:  SearchByTextRequest คำขอให้แสดงผลลัพธ์ ไม่จำเป็นต้องระบุพร็อพเพอร์ตี้ fields ของ SearchByTextRequest ค่าที่ส่งคืน:  Promise<void> สัญญาที่ได้รับการแก้ไขเมื่อโหลดและแสดงข้อมูลสถานที่แล้ว กำหนดค่าวิดเจ็ตให้แสดงผลการค้นหาจากคำขอ Places Text Search API
configureFromSearchNearbyRequest	configureFromSearchNearbyRequest(request) พารามิเตอร์:  request:  SearchNearbyRequest คำขอให้แสดงผลลัพธ์ ไม่จำเป็นต้องระบุพร็อพเพอร์ตี้ fields ของ SearchNearbyRequest ค่าที่ส่งคืน:  Promise<void> สัญญาที่ได้รับการแก้ไขเมื่อโหลดและแสดงข้อมูลสถานที่แล้ว กำหนดค่าวิดเจ็ตให้แสดงผลการค้นหาจากคำขอ Places Nearby Search API
removeEventListener	removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก listener: