Info Window

InfoWindow

google.maps.InfoWindow ชั้นเรียน

การวางซ้อนที่ดูเหมือนลูกโป่งและมักจะเชื่อมต่อกับเครื่องหมาย

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

เข้าถึงโดยโทรไปที่ const {InfoWindow} = await google.maps.importLibrary("maps") หรือ const {InfoWindow} = await google.maps.importLibrary("streetView") ดูไลบรารีใน Maps JavaScript API
InfoWindow
InfoWindow([opts])
พารามิเตอร์: 
สร้างหน้าต่างข้อมูลโดยมีตัวเลือกที่ระบุ คุณสามารถวาง InfoWindow บนแผนที่ที่ตำแหน่งที่ต้องการหรือเหนือเครื่องหมาย โดยขึ้นอยู่กับสิ่งที่ระบุไว้ในตัวเลือก หากการเลื่อนอัตโนมัติปิดอยู่ InfoWindow จะเลื่อนแผนที่เพื่อให้มองเห็นตัวเองเมื่อเปิดขึ้น หลังจากสร้าง InfoWindow แล้ว คุณต้องเรียกใช้ไฟล์ Open เพื่อแสดงหน้าต่างนั้นบนแผนที่ ผู้ใช้สามารถคลิกปุ่มปิดบน InfoWindow เพื่อนำออกจากแผนที่หรือนักพัฒนาซอฟต์แวร์สามารถเรียกclose() เพื่อให้ได้ผลลัพธ์เดียวกัน
close
close()
พารามิเตอร์: ไม่มี
ผลลัพธ์: ไม่มี
ปิด InfoWindow นี้โดยการนำออกจากโครงสร้าง DOM
focus
focus()
พารามิเตอร์: ไม่มี
ผลลัพธ์: ไม่มี
โฟกัสไปที่ InfoWindow นี้ คุณอาจต้องการใช้วิธีนี้ควบคู่กับเหตุการณ์ visible เพื่อให้แน่ใจว่า InfoWindow จะปรากฏก่อนที่จะตั้งค่าโฟกัส ไม่สามารถโฟกัส InfoWindow ที่มองไม่เห็น
getContent
getContent()
พารามิเตอร์: ไม่มี
Return Value:  string|Element|Text|null|undefined เนื้อหาของ InfoWindow นี้ ค่าเดียวกับที่ตั้งค่าไว้ก่อนหน้านี้เป็นเนื้อหา
getPosition
getPosition()
พารามิเตอร์: ไม่มี
ผลลัพธ์:  LatLng|null|undefined ตำแหน่งละติจูดและลองจิจูดของ InfoWindow นี้
getZIndex
getZIndex()
พารามิเตอร์: ไม่มี
Return Value:  number zIndex ของ InfoWindow นี้
open
open([options, anchor])
พารามิเตอร์: 
  • options:  InfoWindowOpenOptions|Map|StreetViewPanorama optional วัตถุ InfoWindowOpenOptions (แนะนำ) หรือแผนที่|พาโนรามาที่จะแสดง InfoWindow นี้
  • anchor:  MVCObject|AdvancedMarkerElement optional แท็ก Anchor ที่จะกำหนดตำแหน่ง InfoWindow นี้ หากแท็ก Anchor เป็นค่าว่าง ระบบจะวาง InfoWindow ไว้ที่ตรงกลางด้านบนของแท็ก Anchor InfoWindow จะแสดงในแผนที่หรือพาโนรามาเดียวกันกับจุดยึด (หากมี)
ผลลัพธ์: ไม่มี
เปิด InfoWindow นี้บนแผนที่ที่ระบุ (ไม่บังคับ) InfoWindow สามารถเชื่อมโยงกับ Anchor ใน API หลัก Anchor เพียงอย่างเดียวคือคลาสมาร์กเกอร์ อย่างไรก็ตาม Anchor อาจเป็น MVCObject ที่แสดงพร็อพเพอร์ตี้ position และเป็น LatLng และจะมีพร็อพเพอร์ตี้ Point anchorPoint สำหรับการคำนวณ pixelOffset ด้วย (ดู InfoWindowOptions) anchorPoint คือออฟเซ็ตจากตําแหน่งของจุดยึดถึงปลายของ InfoWindow ขอแนะนำให้ใช้อินเทอร์เฟซ InfoWindowOpenOptions เป็นอาร์กิวเมนต์เดียวสำหรับเมธอดนี้ หากต้องการป้องกันไม่ให้เปลี่ยนโฟกัสของเบราว์เซอร์เมื่อเปิด ให้ตั้งค่า InfoWindowOpenOptions.shouldFocus เป็น false
setContent
setContent([content])
พารามิเตอร์: 
  • content:  string|Element|Text optional เนื้อหาที่จะแสดงโดย InfoWindow นี้
ผลลัพธ์: ไม่มี
setOptions
setOptions([options])
พารามิเตอร์: 
ผลลัพธ์: ไม่มี
setPosition
setPosition([position])
พารามิเตอร์: 
  • position:  LatLng|LatLngLiteral optional ตำแหน่งละติจูดและลองจิจูดที่จะแสดง InfoWindow นี้
ผลลัพธ์: ไม่มี
setZIndex
setZIndex(zIndex)
พารามิเตอร์: 
  • zIndex:  number ดัชนีลำดับ z ของ InfoWindow นี้ ระบบจะแสดง InfoWindow ที่มีดัชนี z สูงกว่าปรากฏหน้า InfoWindows อื่นๆ ทั้งหมดโดยมีดัชนี z ต่ำกว่า
ผลลัพธ์: ไม่มี
รับค่าเดิม: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
closeclick
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเกิดขึ้นเมื่อมีการคลิกปุ่มปิด
content_changed
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเริ่มทำงานเมื่อพร็อพเพอร์ตี้เนื้อหามีการเปลี่ยนแปลง
domready
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเกิดขึ้นเมื่อแนบ <div> ที่มีเนื้อหาของ InfoWindow กับ DOM คุณอาจต้องการตรวจสอบเหตุการณ์นี้หากคุณกำลังสร้างเนื้อหาในหน้าต่างข้อมูลแบบไดนามิก
position_changed
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเริ่มทำงานเมื่อพร็อพเพอร์ตี้ตำแหน่งเปลี่ยนแปลง
visible
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเริ่มทํางานเมื่อ InfoWindow แสดงทั้งหมด เหตุการณ์นี้จะไม่เริ่มทำงานเมื่อเลื่อน InfoWindow แล้วกลับมาบนหน้าจอ
zindex_changed
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเริ่มทำงานเมื่อ zดัชนี ของ InfoWindow เปลี่ยนแปลง

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

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

ออบเจ็กต์ InfoWindowOptions ที่ใช้กำหนดคุณสมบัติที่ตั้งค่าใน InfoWindow ได้
ariaLabel optional
ประเภท:  string optional
AriaLabel ที่จะกำหนดให้กับ InfoWindow
content optional
ประเภท:  string|Element|Text optional
เนื้อหาที่จะแสดงใน InfoWindow ซึ่งอาจเป็นองค์ประกอบ HTML, สตริงข้อความธรรมดา หรือสตริงที่มี HTML ก็ได้ InfoWindow จะมีขนาดตามเนื้อหา หากต้องการตั้งค่าขนาดที่อาจไม่เหมาะสมสำหรับเนื้อหา ให้ตั้งค่าเนื้อหาเป็นองค์ประกอบ HTML ที่มีขนาดดังกล่าว
disableAutoPan optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ปิดการเลื่อนแผนที่เพื่อให้ InfoWindow ปรากฏขึ้นทั้งหมดเมื่อเปิด
maxWidth optional
ประเภท:  number optional
ความกว้างสูงสุดของ InfoWindow โดยไม่คำนึงถึงความกว้างของเนื้อหา ค่านี้จะได้รับการพิจารณาในกรณีที่มีการตั้งค่าก่อนเรียกใช้ open() เท่านั้น หากต้องการเปลี่ยนความกว้างสูงสุดเมื่อเปลี่ยนเนื้อหา ให้เรียก close(), setOptions() แล้วกด open()
minWidth optional
ประเภท:  number optional
ความกว้างขั้นต่ำของ InfoWindow โดยไม่คำนึงถึงความกว้างของเนื้อหา เมื่อใช้คุณสมบัตินี้ ขอแนะนำอย่างยิ่งให้ตั้งค่า minWidth เป็นค่าที่ต่ำกว่าความกว้างของแผนที่ (เป็นพิกเซล) ค่านี้จะได้รับการพิจารณาในกรณีที่มีการตั้งค่าก่อนเรียกใช้ open() เท่านั้น หากต้องการเปลี่ยนความกว้างขั้นต่ำเมื่อเปลี่ยนเนื้อหา ให้เรียก close(), setOptions() แล้วกด open()
pixelOffset optional
ประเภท:  Size optional
ค่าออฟเซ็ตเป็นพิกเซลของส่วนปลายของหน้าต่างข้อมูลจากจุดบนแผนที่ซึ่งมีพิกัดทางภูมิศาสตร์ยึดหน้าต่างข้อมูลไว้ หาก InfoWindow เปิดอยู่โดยมี Anchor ระบบจะคำนวณ pixelOffset จากพร็อพเพอร์ตี้ anchorPoint ของ Anchor
position optional
ประเภท:  LatLng|LatLngLiteral optional
ละติจูดและลองจิจูดที่แสดง InfoWindow นี้ หาก InfoWindow เปิดอยู่ด้วย Anchor ระบบจะใช้ตำแหน่งของ Anchor แทน
zIndex optional
ประเภท:  number optional
InfoWindows ทั้งหมดจะแสดงบนแผนที่ตามลำดับ zIndex โดยค่าที่สูงกว่าจะแสดงอยู่ด้านหน้าของ InfoWindows และค่าที่ต่ำกว่า โดยค่าเริ่มต้น InfoWindows จะแสดงตามละติจูด โดย InfoWindows ของละติจูดต่ำกว่าจะปรากฏด้านหน้าของ InfoWindows ในละติจูดที่สูงกว่า InfoWindows จะแสดงด้านหน้าเครื่องหมายเสมอ

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

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

ตัวเลือกในการเปิด InfoWindow
anchor optional
ประเภท:  MVCObject|AdvancedMarkerElement optional
แท็ก Anchor ที่จะอยู่ในตำแหน่ง InfoWindow นี้ หากแท็ก Anchor เป็นค่าว่าง ระบบจะวาง InfoWindow ไว้ที่ตรงกลางด้านบนของแท็ก Anchor InfoWindow จะแสดงในแผนที่หรือพาโนรามาเดียวกันกับจุดยึด (หากมี)
map optional
ประเภท:  Map|StreetViewPanorama optional
แผนที่หรือพาโนรามาที่จะแสดง InfoWindow นี้
shouldFocus optional
ประเภท:  boolean optional
ควรย้ายโฟกัสภายใน InfoWindow เมื่อเปิดหรือไม่ เมื่อไม่ได้ตั้งค่าพร็อพเพอร์ตี้นี้หรือเมื่อตั้งค่าเป็น null หรือ undefined ระบบจะใช้การเรียนรู้เพื่อตัดสินใจว่าควรย้ายโฟกัสหรือไม่ ขอแนะนำให้ตั้งค่าพร็อพเพอร์ตี้นี้อย่างชัดเจนเพื่อให้ตรงกับความต้องการของคุณ เนื่องจากการเรียนรู้อาจมีการเปลี่ยนแปลงและอาจทำงานได้ไม่ดีในทุก Use Case