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 เพื่อแสดงบนแผนที่ ผู้ใช้สามารถคลิกปุ่มปิดบนหน้าต่างข้อมูลเพื่อลบออกจากแผนที่ หรือนักพัฒนาซอฟต์แวร์สามารถเรียกปิด() สําหรับผลกระทบเดียวกันนี้
close
close()
พารามิเตอร์: ไม่มี
ค่าที่ส่งกลับ: ไม่มี
ปิด InfoWindow นี้โดยนําออกจากโครงสร้าง DOM
focus
focus()
พารามิเตอร์: ไม่มี
ค่าที่ส่งกลับ: ไม่มี
โฟกัสไปที่ InfoWindow นี้ คุณอาจต้องใช้วิธีนี้พร้อมกับเหตุการณ์ visible เพื่อให้แน่ใจว่าคุณดู InfoWindow ได้ก่อนตั้งค่าโฟกัส ไม่สามารถโฟกัส InfoWindow ที่มองไม่เห็น
getContent
getContent()
พารามิเตอร์: ไม่มี
Return Value:  string|Element|Text|null|undefined เนื้อหาของ InfoWindow นี้ เหมือนกับการตั้งค่าเนื้อหาก่อนหน้านี้
getPosition
getPosition()
พารามิเตอร์: ไม่มี
Return Value:  LatLng|null|undefined ตําแหน่ง LatLng ของ InfoWindow นี้
getZIndex
getZIndex()
พารามิเตอร์: ไม่มี
Return Value:  number ค่า zIndex ของ InfoWindow นี้
open
open([options, anchor])
พารามิเตอร์: 
  • options:  InfoWindowOpenOptions|Map|StreetViewPanorama optional อาจเป็นออบเจ็กต์ InfoWindowOpenOptions (แนะนํา) หรือแผนที่|พาโนรามาที่จะแสดง InfoWindow นี้
  • anchor:  MVCObject|AdvancedMarkerElement optional Anchor ที่จะกําหนดหน้าต่าง Info นี้ ถ้าการเชื่อมโยงไม่เป็นนัล หน้าต่างข้อมูลจะถูกวางไว้ที่กึ่งกลางด้านบนของการเชื่อมโยง InfoWindow จะแสดงในแผนที่หรือภาพพาโนรามาเหมือนกับ Anchor (หากมี)
ค่าที่ส่งกลับ: ไม่มี
เปิด InfoWindow นี้บนแผนที่ที่กําหนด คุณสามารถเชื่อมโยง InfoWindow กับแท็ก Anchor ได้ ใน API หลัก จุดยึดเดียวคือคลาสมาร์กเกอร์ แต่ Anchor อาจเป็น MVCObject ที่แสดงพร็อพเพอร์ตี้ positionLLng และสามารถเลือกพร็อพเพอร์ตี้ Point anchorPoint สําหรับการคํานวณ pixelOffset (ดู InfoWindowOptions) anchorPoint คือออฟเซ็ตจากตําแหน่ง Anchor ที่อยู่ท้าย InfoWindow ขอแนะนําให้ใช้อินเทอร์เฟซ InfoWindowOpenOptions เป็นอาร์กิวเมนต์เดียวสําหรับวิธีนี้ หากต้องการป้องกันไม่ให้มีการเปลี่ยนโฟกัสของเบราว์เซอร์เป็นเปิด ให้ตั้งค่า InfoWindowOpenOptions.shouldFocus เป็น false
setContent
setContent([content])
พารามิเตอร์: 
  • content:  string|Element|Text optional เนื้อหาที่จะแสดงโดย InfoWindow นี้
ค่าที่ส่งกลับ: ไม่มี
setOptions
setOptions([options])
พารามิเตอร์: 
ค่าที่ส่งกลับ: ไม่มี
setPosition
setPosition([position])
พารามิเตอร์: 
  • position:  LatLng|LatLngLiteral optional ตําแหน่ง LatLng ที่จะแสดง 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()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะเริ่มทํางานเมื่อ zIndex ของ InfoWindow มีการเปลี่ยนแปลง

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

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

ออบเจ็กต์ InfoWindowOptions ที่ใช้กําหนดพร็อพเพอร์ตี้ที่สามารถตั้งค่าใน InfoWindow ได้
ariaLabel optional
ประเภท:  string optional
AriaLabel เพื่อกําหนดให้กับ InfoWindow
content optional
ประเภท:  string|Element|Text optional
เนื้อหาที่จะแสดงในหน้าต่างข้อมูล ซึ่งอาจเป็นองค์ประกอบ 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 ด้วยจุดยึด pixelOffset จะคํานวณจากพร็อพเพอร์ตี้ anchorPoint ของ Anchor
position optional
ประเภท:  LatLng|LatLngLiteral optional
LatLng ที่จะแสดง 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 ที่จะกําหนดหน้าต่าง Info นี้ ถ้าการเชื่อมโยงไม่เป็นนัล หน้าต่างข้อมูลจะถูกวางไว้ที่กึ่งกลางด้านบนของการเชื่อมโยง InfoWindow จะแสดงในแผนที่หรือภาพพาโนรามาเหมือนกับ Anchor (หากมี)
map optional
ประเภท:  Map|StreetViewPanorama optional
แผนที่หรือภาพพาโนรามาที่จะแสดง InfoWindow นี้
shouldFocus optional
ประเภท:  boolean optional
ควรย้ายโฟกัสภายใน InfoWindow เมื่อเปิดหรือไม่ เมื่อไม่ได้ตั้งค่าพร็อพเพอร์ตี้นี้หรือเมื่อตั้งค่าเป็น null หรือ undefined ระบบจะใช้การเรียนรู้ของระบบเพื่อตัดสินใจว่าจะย้ายโฟกัสหรือไม่ ขอแนะนําให้ตั้งค่าพร็อพเพอร์ตี้นี้เพื่อให้ตรงตามความต้องการของคุณ เนื่องจากฮิวริสติกอาจมีการเปลี่ยนแปลงและอาจทํางานได้ไม่ดีกับกรณีการใช้งานทั้งหมด