Info Window

InfoWindow class

google.maps.InfoWindow class

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

คลาสนี้ขยายจาก 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 แล้ว คุณต้องเรียกใช้ 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 (แนะนำ) หรือ map|panorama สำหรับแสดงผล InfoWindow นี้ anchor:  MVCObject|AdvancedMarkerElement optional หมุดที่จะกำหนดตำแหน่งของ InfoWindow นี้ หากจุดยึดไม่ใช่ค่าว่าง กล่องข้อมูลจะวางอยู่ที่ด้านบนตรงกลางของจุดยึด กล่องข้อมูลจะแสดงผลในแผนที่หรือภาพพาโนรามาเดียวกับจุดยึด (หากมี) ผลลัพธ์: ไม่มี เปิด InfoWindow นี้ในแผนที่ที่ระบุ คุณอาจเชื่อมโยงวิดเจ็ตข้อมูลกับจุดยึดได้ (ไม่บังคับ) ใน API หลัก องค์ประกอบหลักเพียงอย่างเดียวคือคลาสเครื่องหมาย อย่างไรก็ตาม หมุดยึดอาจเป็น 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, การกดแป้น Esc เพื่อปิด 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 interface

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 ปิดใช้การเลื่อนแผนที่เพื่อให้เห็นวิดเจ็ตข้อมูลได้เต็มรูปแบบเมื่อเปิด
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 ด้วยจุดยึด ระบบจะคํานวณ pixelOffset จากพร็อพเพอร์ตี้ anchorPoint ของจุดยึด
position optional	ประเภท:  LatLng|LatLngLiteral optional LatLng ที่จะใช้แสดง InfoWindow นี้ หากเปิด InfoWindow ด้วยจุดยึด ระบบจะใช้ตำแหน่งของจุดยึดแทน
zIndex optional	ประเภท:  number optional กล่องข้อมูลทั้งหมดจะแสดงบนแผนที่ตามลําดับของ zIndex โดยค่าที่สูงกว่าจะแสดงอยู่หน้ากล่องข้อมูลที่มีค่าต่ำกว่า โดยค่าเริ่มต้น กล่องข้อมูลจะแสดงตามละติจูด โดยกล่องข้อมูลของละติจูดที่ต่ำกว่าจะปรากฏอยู่หน้ากล่องข้อมูลของละติจูดที่สูงกว่า กล่องข้อมูลจะแสดงอยู่หน้าเครื่องหมายเสมอ

InfoWindowOpenOptions interface

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

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

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