Places Widgets

คลาส PlaceAutocompleteElement

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

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-match
ส่วนของการคาดคะเนที่ส่งกลับที่ตรงกับข้อมูลที่ผู้ใช้ป้อน โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นตัวหนา โปรดทราบว่าข้อความที่ตรงกันอาจอยู่ที่ใดก็ได้ภายในรายการการคาดคะเน ไม่จำเป็นว่าจะต้องเป็นส่วนหนึ่งของข้อความการคาดคะเนหลัก-รายการ
prediction-item-selected
รายการเมื่อผู้ใช้ไปยังส่วนต่างๆ ของรายการนั้นผ่านแป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะได้รับผลกระทบจากทั้งรูปแบบส่วนนี้และรูปแบบส่วนรายการการคาดคะเน
prediction-list
องค์ประกอบภาพที่มีรายการการคาดคะเนที่แสดงโดยบริการเติมข้อความอัตโนมัติ รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้ PlaceAutocompleteElement
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงประเภทเหตุการณ์ที่ต้องการรับ
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด ManageEvent
  • 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)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อผู้ใช้เลือกการคาดคะเนสถานที่ มีออบเจ็กต์ Place
gmp-requesterror
function(placeAutocompleteRequestErrorEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อคำขอที่ส่งไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) กิจกรรมนี้จะไม่แสดงเป็นบับเบิล

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

อินเทอร์เฟซ 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

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

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

ชั้นเรียนนี้ขยายระยะเวลาถึง Event

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

คลาส PlaceAutocompleteRequestErrorEvent

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

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

ชั้นเรียนนี้ขยายระยะเวลาถึง Event

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

คลาสเติมข้อความอัตโนมัติ

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

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

อินเทอร์เฟซ 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", "ประเภท" และ "ชื่อ" พร้อมทั้ง "place_id", "ประเภท" และคำอธิบายซึ่งแสดงผลโดยบริการเติมข้อความอัตโนมัติ ปิดใช้โดยค่าเริ่มต้น
strictBounds optional
ประเภท:  boolean optional
ค่าบูลีนซึ่งบ่งชี้ว่าวิดเจ็ตการเติมข้อความอัตโนมัติควรแสดงเฉพาะสถานที่ที่อยู่ภายในขอบเขตของวิดเจ็ตเติมข้อความอัตโนมัติในขณะที่ส่งคำค้นหาเท่านั้น การตั้งค่า strictBounds เป็น false (ซึ่งเป็นค่าเริ่มต้น) จะทำให้ผลลัพธ์มีความเอนเอียงต่อ (แต่ไม่จำกัดเพียง) ตำแหน่งที่อยู่ในขอบเขตของ
types optional
ประเภท:  Array<string> optional
ประเภทของการคาดการณ์ที่จะแสดง โปรดดูประเภทที่รองรับใน คู่มือนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลทุกประเภท

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
พื้นที่ที่จะให้น้ำหนักกับการคาดคะเนข้อความค้นหา การคาดการณ์มีความลำเอียงต่อแต่ไม่จำกัดเพียงคำค้นหาที่กำหนดเป้าหมายไปยังขอบเขตเหล่านี้