Info Window

InfoWindow class

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

ภาพซ้อนทับที่มีลักษณะคล้ายฟองคำพูดและมักเชื่อมต่อกับเครื่องหมาย

ชั้นเรียนนี้ขยายเวลา MVCObject

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

ผู้ผลิต

InfoWindow

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

พร็อพเพอร์ตี้
isOpen	ประเภท:  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 จุดยึดที่จะวาง InfoWindow นี้ หากแองเคอร์ไม่ใช่ค่าว่าง ระบบจะวางตำแหน่ง InfoWindow ที่ด้านบนตรงกลางของแองเคอร์ ระบบจะแสดง InfoWindow บนแผนที่หรือภาพพาโนรามาเดียวกันกับจุดยึด (หากมี) ค่าที่ส่งคืน: ไม่มี เปิด InfoWindow นี้ในแผนที่ที่ระบุ คุณอาจเชื่อมโยง InfoWindow กับ Anchor ก็ได้ (ไม่บังคับ) ใน Core API จุดยึดเดียวคือคลาส Marker อย่างไรก็ตาม จุดยึดอาจเป็น MVCObject ใดก็ได้ที่แสดงพร็อพเพอร์ตี้ LatLng position และอาจแสดงพร็อพเพอร์ตี้ Point anchorPoint เพื่อคำนวณ pixelOffset (ดู InfoWindowOptions) anchorPoint คือออฟเซ็ตจากตำแหน่งของเครื่องหมายไปยังปลายของ 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 นี้ หน้าต่างข้อมูลที่มี z-index สูงกว่าจะแสดงอยู่หน้าหน้าต่างข้อมูลอื่นๆ ทั้งหมดที่มี z-index ต่ำกว่า ค่าที่ส่งคืน: ไม่มี
สืบทอด: 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() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อ InfoWindowzIndex ขององค์ประกอบมีการเปลี่ยนแปลง

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 แสดงอย่างเต็มรูปแบบเมื่อเปิด
headerContent optional	ประเภท:  string|Element|Text optional เนื้อหาที่จะแสดงในแถวส่วนหัวของ InfoWindow ซึ่งอาจเป็นองค์ประกอบ HTML หรือสตริงข้อความธรรมดาก็ได้ ระบบจะปรับขนาด InfoWindow ตามเนื้อหา หากต้องการกำหนดขนาดที่ชัดเจนสำหรับเนื้อหาส่วนหัว ให้ตั้งค่า headerContent เป็นองค์ประกอบ HTML ที่มีขนาดดังกล่าว
headerDisabled optional	ประเภท:  boolean optional ปิดใช้แถวส่วนหัวทั้งหมดใน 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 LatLng ที่จะแสดง InfoWindow นี้ หากเปิด InfoWindow ด้วย Anchor ระบบจะใช้ตำแหน่งของ Anchor แทน
zIndex optional	ประเภท:  number optional InfoWindows ทั้งหมดจะแสดงบนแผนที่ตามลำดับ zIndex โดยค่าที่สูงกว่าจะแสดงอยู่หน้า InfoWindows ที่มีค่าต่ำกว่า โดยค่าเริ่มต้น ระบบจะแสดงหน้าต่างข้อมูลตามละติจูด โดยหน้าต่างข้อมูลที่มีละติจูดต่ำกว่าจะปรากฏอยู่หน้าหน้าต่างข้อมูลที่มีละติจูดสูงกว่า โดยหน้าต่างข้อมูลจะแสดงอยู่ด้านหน้าเครื่องหมายเสมอ

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

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

ตัวเลือกในการเปิด InfoWindow

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