Places Widgets

PlaceAutocompleteElement class

google.maps.places.PlaceAutocompleteElement class

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

องค์ประกอบที่กำหนดเอง:
<gmp-place-autocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-place-autocomplete>

คลาสนี้ขยายจาก HTMLElement

คลาสนี้ใช้ PlaceAutocompleteElementOptions

เข้าถึงโดยการโทรหา const {PlaceAutocompleteElement} = await google.maps.importLibrary("places") โปรดดูไลบรารีใน Maps JavaScript API
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
พารามิเตอร์: 
componentRestrictions
ประเภท:  ComponentRestrictions optional
ข้อจํากัดของคอมโพเนนต์ ข้อจํากัดของคอมโพเนนต์ใช้เพื่อจํากัดการคาดการณ์ไว้เฉพาะภายในคอมโพเนนต์หลัก เช่น ประเทศ
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-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
ประเภท:  string optional
ตัวระบุภาษาสำหรับภาษาที่ควรแสดงผลลัพธ์ (หากเป็นไปได้) ผลการค้นหาในภาษาที่เลือกอาจได้รับการจัดอันดับสูงกว่า แต่การแนะนำไม่ได้จำกัดอยู่แค่ภาษานี้ ดูรายการภาษาที่รองรับ
แอตทริบิวต์ HTML:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
ประเภท:  string optional
รหัสภูมิภาคที่ใช้สำหรับการจัดรูปแบบผลลัพธ์และกรองผลลัพธ์ แต่ไม่ได้จำกัดการแนะนำไว้เฉพาะในประเทศนี้ รหัสภูมิภาคยอมรับค่า 2 อักขระของ ccTLD ("โดเมนระดับบนสุด") รหัส ccTLD ส่วนใหญ่จะเหมือนกับรหัส ISO 3166-1 โดยมีข้อยกเว้นบางประการ เช่น ccTLD ของสหราชอาณาจักรคือ "uk" (.co.uk) ส่วนรหัส ISO 3166-1 คือ "gb" (ในทางเทคนิคสำหรับนิติบุคคล "สหราชอาณาจักรบริเตนใหญ่และไอร์แลนด์เหนือ")
แอตทริบิวต์ HTML:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
types
ประเภท:  Array<string> optional
ประเภทการคาดการณ์ที่จะแสดง ดูประเภทที่รองรับได้ใน คู่มือนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลทุกประเภท
แอตทริบิวต์ HTML:
  • <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>
prediction-item
รายการในเมนูแบบเลื่อนลงของการคาดการณ์ที่แสดงการคาดการณ์รายการเดียว
prediction-item-icon
ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในรายการการคาดคะเน
prediction-item-main-text
ส่วนของรายการการคาดการณ์ที่เป็นข้อความหลักของการคาดการณ์ สำหรับสถานที่ตั้งทางภูมิศาสตร์ ฟิลด์นี้จะมีชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อและหมายเลขถนน เช่น "ถนนคิง 10" โดยค่าเริ่มต้น 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
องค์ประกอบภาพที่มีรายการการคาดคะเนที่บริการการเติมข้อความอัตโนมัติของสถานที่แสดง รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้ PlaceAutocompleteElement
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กําหนดเองรองรับเฉพาะ capture และ passive
ผลลัพธ์:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนําออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ผลลัพธ์:  void
นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะทริกเกอร์เมื่อผู้ใช้เลือกการคาดคะเนสถานที่ มีออบเจ็กต์สถานที่
gmp-requesterror
function(placeAutocompleteRequestErrorEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะทํางานเมื่อคําขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่ได้ทําให้เกิดเหตุการณ์ย่อย

PlaceAutocompleteElementOptions interface

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

ตัวเลือกในการสร้าง PlaceAutocompleteElement
componentRestrictions optional
ประเภท:  ComponentRestrictions optional
ดู PlaceAutocompleteElement.componentRestrictions
locationBias optional
ประเภท:  LocationBias optional
ดู PlaceAutocompleteElement.locationBias
locationRestriction optional
ประเภท:  LocationRestriction optional
ดู PlaceAutocompleteElement.locationRestriction
requestedLanguage optional
ประเภท:  string optional
ดู PlaceAutocompleteElement.requestedLanguage
requestedRegion optional
ประเภท:  string optional
ดู PlaceAutocompleteElement.requestedRegion
types optional
ประเภท:  Array<string> optional
ดู PlaceAutocompleteElement.types

PlaceAutocompletePlaceSelectEvent class

google.maps.places.PlaceAutocompletePlaceSelectEvent class

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

คลาสนี้ขยายจาก Event

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

PlaceAutocompleteRequestErrorEvent class

google.maps.places.PlaceAutocompleteRequestErrorEvent class

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

คลาสนี้ขยายจาก Event

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

การเติมข้อความอัตโนมัติ class

google.maps.places.Autocomplete class

วิดเจ็ตที่แสดงการคาดคะเนสถานที่ตามข้อความที่ผู้ใช้ป้อน โดยจะแนบกับองค์ประกอบอินพุตประเภท text และรอรับการป้อนข้อความในช่องนั้น รายการการคาดคะเนจะแสดงเป็นรายการแบบเลื่อนลง และจะอัปเดตเมื่อป้อนข้อความ

คลาสนี้ขยายจาก MVCObject

เข้าถึงโดยการโทรหา const {Autocomplete} = await google.maps.importLibrary("places") โปรดดูไลบรารีใน Maps JavaScript API
Autocomplete
Autocomplete(inputField[, opts])
พารามิเตอร์: 
  • inputField:  HTMLInputElement ช่องข้อความ <input> ที่ควรแนบ Autocomplete
  • opts:  AutocompleteOptions optional ตัวเลือก
สร้างอินสแตนซ์ใหม่ของ Autocomplete ที่แนบมากับช่องข้อความอินพุตที่ระบุพร้อมตัวเลือกที่ระบุ
getBounds
getBounds()
พารามิเตอร์: ไม่มี
ผลลัพธ์:  LatLngBounds|undefined ขอบเขตการถ่วงน้ำหนัก
แสดงผลขอบเขตของการคาดการณ์ที่มีอคติ
getFields
getFields()
พารามิเตอร์: ไม่มี
ผลลัพธ์:  Array<string>|undefined
แสดงผลช่องที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดเรียบร้อยแล้ว ดูรายการช่องได้ที่ PlaceResult
getPlace
getPlace()
พารามิเตอร์: ไม่มี
ผลลัพธ์:  PlaceResult สถานที่ที่ผู้ใช้เลือก
แสดงผลรายละเอียดของสถานที่ที่ผู้ใช้เลือกหากดึงข้อมูลรายละเอียดสําเร็จ ไม่เช่นนั้น ระบบจะแสดงผลออบเจ็กต์สถานที่จำลองโดยตั้งค่าพร็อพเพอร์ตี้ name เป็นค่าปัจจุบันของช่องป้อนข้อมูล
setBounds
setBounds(bounds)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
กำหนดพื้นที่ที่ต้องการให้แสดงผลการค้นหาสถานที่ ผลการค้นหาจะเน้นที่พื้นที่นี้ แต่ไม่จํากัดเพียงพื้นที่นี้
setComponentRestrictions
setComponentRestrictions(restrictions)
พารามิเตอร์: 
  • restrictions:  ComponentRestrictions optional ข้อจำกัดในการใช้งาน
ผลลัพธ์: ไม่มี
ตั้งค่าข้อจํากัดของคอมโพเนนต์ ข้อจํากัดของคอมโพเนนต์ใช้เพื่อจํากัดการคาดการณ์ไว้เฉพาะภายในคอมโพเนนต์หลัก เช่น ประเทศ
setFields
setFields(fields)
พารามิเตอร์: 
  • fields:  Array<string> optional
ผลลัพธ์: ไม่มี
ตั้งค่าช่องที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดเรียบร้อยแล้ว ดูรายการช่องได้ที่ PlaceResult
setOptions
setOptions(options)
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
setTypes
setTypes(types)
พารามิเตอร์: 
  • types:  Array<string> optional ประเภทการคาดคะเนที่จะรวม
ผลลัพธ์: ไม่มี
ตั้งค่าประเภทการคาดการณ์ที่จะแสดง ดูประเภทที่รองรับได้ใน คู่มือนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลทุกประเภท
รับค่ามา: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
place_changed
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะทริกเกอร์เมื่อ PlaceResult พร้อมใช้งานสําหรับสถานที่ที่ผู้ใช้เลือก
หากผู้ใช้ป้อนชื่อสถานที่ที่ตัวควบคุมไม่ได้แนะนำและกดแป้น Enter หรือหากคําขอรายละเอียดสถานที่ไม่สําเร็จ PlaceResult จะมีข้อมูลที่ผู้ใช้ป้อนในพร็อพเพอร์ตี้ name โดยไม่มีการกําหนดพร็อพเพอร์ตี้อื่นๆ

AutocompleteOptions interface

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

ตัวเลือกที่ตั้งค่าได้ในออบเจ็กต์ Autocomplete
bounds optional
ประเภท:  LatLngBounds|LatLngBoundsLiteral optional
พื้นที่ที่จะค้นหาสถานที่
componentRestrictions optional
ประเภท:  ComponentRestrictions optional
ข้อจํากัดของคอมโพเนนต์ ข้อจํากัดของคอมโพเนนต์ใช้เพื่อจํากัดการคาดการณ์ไว้เฉพาะภายในคอมโพเนนต์หลัก เช่น ประเทศ
fields optional
ประเภท:  Array<string> optional
ช่องที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดสำเร็จ ซึ่งจะมีการเรียกเก็บเงิน หากส่ง ['ALL'] ระบบจะแสดงผลและเรียกเก็บเงินสำหรับช่องที่มีทั้งหมด (ไม่แนะนำสำหรับการใช้งานจริง) ดูรายการช่องได้ที่ PlaceResult ฟิลด์ที่ฝังอยู่สามารถระบุได้ด้วยเส้นทางแบบจุด (เช่น "geometry.location") โดยค่าเริ่มต้นคือ ['ALL']
placeIdOnly optional
ประเภท:  boolean optional
กำหนดว่าจะดึงข้อมูลเฉพาะรหัสสถานที่หรือไม่ PlaceResult ที่พร้อมใช้งานเมื่อมีการเรียกเหตุการณ์ place_changed จะมีเฉพาะช่อง place_id, types และ name โดยมี place_id, types และคำอธิบายที่บริการป้อนข้อความอัตโนมัติแสดง ปิดใช้โดยค่าเริ่มต้น
strictBounds optional
ประเภท:  boolean optional
ค่าบูลีน ซึ่งระบุว่าวิดเจ็ตการเติมข้อความอัตโนมัติควรแสดงเฉพาะสถานที่ที่อยู่ภายในขอบเขตของวิดเจ็ตการเติมข้อความอัตโนมัติ ณ เวลาที่มีการส่งการค้นหา การตั้งค่า strictBounds เป็น false (ซึ่งเป็นค่าเริ่มต้น) จะทำให้ผลการค้นหามีแนวโน้มที่จะแสดงสถานที่ที่อยู่ภายในขอบเขตเท่านั้น
types optional
ประเภท:  Array<string> optional
ประเภทการคาดการณ์ที่จะแสดง ดูประเภทที่รองรับได้ใน คู่มือนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลทุกประเภท

google.maps.places.SearchBox class

วิดเจ็ตที่แสดงการคาดคะเนข้อความค้นหาโดยอิงตามข้อความที่ผู้ใช้ป้อน โดยจะแนบกับองค์ประกอบอินพุตประเภท 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 interface

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

ตัวเลือกที่ตั้งค่าได้ในออบเจ็กต์ SearchBox
bounds optional
ประเภท:  LatLngBounds|LatLngBoundsLiteral optional
พื้นที่ที่จะใช้สร้างอคติในการคาดการณ์การค้นหา การคาดคะเนจะมุ่งเน้นที่การค้นหาที่กำหนดเป้าหมายขอบเขตเหล่านี้ แต่ไม่ได้จำกัดอยู่เพียงการค้นหาดังกล่าว