Info Window

คลาส InfoWindow

google.maps.InfoWindow class
extends MVCObject
library "maps", "streetView"

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

const {InfoWindow} = await google.maps.importLibrary("maps");

หรือ

const {InfoWindow} = await google.maps.importLibrary("streetView");

ผู้ผลิต

InfoWindow

InfoWindow([opts]) พารามิเตอร์ opts: InfoWindowOptions optional สร้างหน้าต่างข้อมูลที่มีตัวเลือกที่ระบุ คุณสามารถวาง InfoWindow บนแผนที่ในตำแหน่งที่ต้องการหรือเหนือเครื่องหมายก็ได้ ทั้งนี้ขึ้นอยู่กับสิ่งที่ระบุไว้ในตัวเลือก เว้นแต่จะปิดใช้การเลื่อนอัตโนมัติ InfoWindow จะเลื่อนแผนที่เพื่อให้มองเห็นได้เมื่อเปิดขึ้น หลังจากสร้าง InfoWindow แล้ว คุณต้องเรียกใช้ open เพื่อแสดงบนแผนที่ ผู้ใช้สามารถคลิกปุ่มปิดใน InfoWindow เพื่อนำออกจากแผนที่ หรือนักพัฒนาแอปสามารถเรียกใช้ close() เพื่อให้ได้ผลลัพธ์เดียวกัน

พร็อพเพอร์ตี้
isOpen readonly	ประเภท: boolean ตรวจสอบว่า InfoWindow เปิดอยู่หรือไม่

เมธอด
close	close() พารามิเตอร์: ไม่มี ผลลัพธ์: ไม่มี ปิด InfoWindow นี้โดยนำออกจากโครงสร้าง DOM
focus	focus() พารามิเตอร์: ไม่มี ผลลัพธ์: ไม่มี ตั้งค่าโฟกัสที่ InfoWindow นี้ คุณอาจต้องพิจารณาใช้วิธีนี้ร่วมกับเหตุการณ์ visible เพื่อให้แน่ใจว่า InfoWindow จะปรากฏก่อนที่จะโฟกัส ไม่สามารถโฟกัส InfoWindow ที่มองไม่เห็นได้
getContent	getContent() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: string|Element|Text|null|undefined เนื้อหาของ InfoWindow นี้ เหมือนกับที่ตั้งค่าไว้ก่อนหน้านี้เป็นเนื้อหา
getHeaderContent	getHeaderContent() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: string|Element|Text|null|undefined เนื้อหาส่วนหัวของ InfoWindow นี้ ดูข้อมูลที่ InfoWindowOptions.headerContent
getHeaderDisabled	getHeaderDisabled() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: boolean|undefined แถวส่วนหัวทั้งหมดถูกปิดใช้หรือไม่ ดูข้อมูลที่ InfoWindowOptions.headerDisabled
getPosition	getPosition() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: LatLng|null|undefined ตำแหน่ง LatLng ของ InfoWindow นี้
getZIndex	getZIndex() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: number zIndex ของ InfoWindow นี้
open	open([options, anchor]) พารามิเตอร์ options: InfoWindowOpenOptions|Map|StreetViewPanorama optional ออบเจ็กต์ InfoWindowOpenOptions (แนะนำ) หรือแผนที่|ภาพพาโนรามาที่จะแสดงผล InfoWindow นี้ anchor: MVCObject|AdvancedMarkerElement optional Anchor ที่จะวางตำแหน่ง InfoWindow นี้ หาก Anchor ไม่ใช่ค่า Null ระบบจะวางตำแหน่ง InfoWindow ไว้ที่กึ่งกลางด้านบนของ Anchor InfoWindow จะแสดงผลบนแผนที่หรือภาพพาโนรามาเดียวกันกับ Anchor (หากมี) ผลลัพธ์: ไม่มี เปิด InfoWindow นี้ในแผนที่ที่ระบุ คุณสามารถเชื่อมโยง InfoWindow กับ Anchor ได้ (ไม่บังคับ) ใน Core API Anchor เพียงรายการเดียวคือคลาส Marker อย่างไรก็ตาม Anchor อาจเป็น MVCObject ใดก็ได้ที่แสดงพร็อพเพอร์ตี้ LatLng position และพร็อพเพอร์ตี้ Point anchorPoint (ไม่บังคับ) สำหรับการคำนวณ pixelOffset (ดู InfoWindowOptions) anchorPoint คือออฟเซ็ตจากตำแหน่งของ Anchor ไปยังส่วนปลายของ InfoWindow ขอแนะนำให้ใช้อินเทอร์เฟซ InfoWindowOpenOptions เป็นอาร์กิวเมนต์เดียวสำหรับเมธอดนี้ หากต้องการป้องกันไม่ให้เปลี่ยนโฟกัสของเบราว์เซอร์เมื่อเปิด ให้ตั้งค่า InfoWindowOpenOptions.shouldFocus เป็น false
setContent	setContent([content]) พารามิเตอร์ content: string|Element|Text optional เนื้อหาที่จะแสดงโดย InfoWindow นี้ ผลลัพธ์: ไม่มี
setHeaderContent	setHeaderContent([headerContent]) พารามิเตอร์ headerContent: string|Element|Text optional เนื้อหาส่วนหัวที่จะแสดงโดย InfoWindow นี้ ดูข้อมูลที่ InfoWindowOptions.headerContent ผลลัพธ์: ไม่มี
setHeaderDisabled	setHeaderDisabled([headerDisabled]) พารามิเตอร์ headerDisabled: boolean optional ระบุว่าจะปิดใช้แถวส่วนหัวทั้งหมดหรือไม่ ดูข้อมูลที่ InfoWindowOptions.headerDisabled ผลลัพธ์: ไม่มี
setOptions	setOptions([options]) พารามิเตอร์ options: InfoWindowOptions optional ผลลัพธ์: ไม่มี
setPosition	setPosition([position]) พารามิเตอร์ position: LatLng|LatLngLiteral optional ตำแหน่ง LatLng ที่จะแสดง InfoWindow นี้ ผลลัพธ์: ไม่มี
setZIndex	setZIndex(zIndex) พารามิเตอร์ zIndex: number ดัชนีลำดับ Z สำหรับ InfoWindow นี้ InfoWindow ที่มีดัชนีลำดับ Z สูงกว่าจะแสดงอยู่ด้านหน้า InfoWindow อื่นๆ ทั้งหมดที่มีดัชนีลำดับ Z ต่ำกว่า ผลลัพธ์: ไม่มี
สืบทอด: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

กิจกรรม
close	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อใดก็ตามที่ InfoWindow ปิดลง เช่น อาจเกิดจากการเรียกใช้เมธอด InfoWindow.close, การกดปุ่ม Escape เพื่อปิด InfoWindow, การคลิกปุ่มปิด หรือการย้าย InfoWindow ไปยังแผนที่อื่น
closeclick	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการคลิกปุ่มปิด
content_changed	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อพร็อพเพอร์ตี้เนื้อหามีการเปลี่ยนแปลง
domready	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อ <div> ที่มีเนื้อหาของ InfoWindow แนบอยู่กับ DOM คุณอาจต้องการตรวจสอบเหตุการณ์นี้หากกำลังสร้างเนื้อหาหน้าต่างข้อมูลแบบไดนามิก
headercontent_changed	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อพร็อพเพอร์ตี้ headerContent มีการเปลี่ยนแปลง
headerdisabled_changed	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อพร็อพเพอร์ตี้ headerDisabled มีการเปลี่ยนแปลง
position_changed	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อพร็อพเพอร์ตี้ตำแหน่งมีการเปลี่ยนแปลง
visible	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อ InfoWindow ปรากฏอย่างสมบูรณ์ เหตุการณ์นี้จะไม่เริ่มทำงานเมื่อเลื่อน InfoWindow ออกจากหน้าจอแล้วเลื่อนกลับเข้ามาใหม่
zindex_changed	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อ zIndex ของ InfoWindow มีการเปลี่ยนแปลง

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

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

ออบเจ็กต์ InfoWindowOptions ที่ใช้กำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน InfoWindow

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

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

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

ตัวเลือกสำหรับการเปิด InfoWindow

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