Info Window

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

InfoWindow คลาส

google.maps.InfoWindow คลาส

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

คลาสนี้จะขยาย MVCObject

เมื่อใช้ v=beta จะเข้าถึงได้โดยโทรหา const {InfoWindow} = await google.map.importLibrary("maps") หรือ const {InfoWindow} = await google.map.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()
พารามิเตอร์: ไม่มี
ค่าที่แสดงผล: string|Element|null|Text|undefined เนื้อหาของ InfoWindow นี้ เหมือนกับที่เคยกําหนดให้เป็นเนื้อหา
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|AdvancedMarkerView optional แท็ก Anchor ที่จะวาง InfoWindow นี้ หากแท็ก Anchor ไม่เป็นค่าว่าง ระบบจะวาง InfoWindow ไว้ที่ตรงกลางด้านบนของแท็ก InfoWindow จะแสดงในแผนที่หรือพาโนรามาเดียวกันกับจุดยึด (หากมี)
ค่าการแสดงผล: ไม่มี
เปิด InfoWindow นี้บนแผนที่ที่ระบุ InfoWindow สามารถเชื่อมโยงกับแท็ก Anchor ได้ ใน API หลัก แท็ก Anchor เดียวคือคลาส Mark แต่แท็ก Anchor อาจเป็น MVCObject ที่แสดงพร็อพเพอร์ตี้ position ของ LatLng และอาจเลือกใช้พร็อพเพอร์ตี้ 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 ด้วยแท็ก Anchor ระบบจะคํานวณ pixelOffset จากพร็อพเพอร์ตี้ anchorPoint ของแท็ก Anchor
position optional
ประเภท: LatLng|LatLngLiteral optional
LatLng ที่ใช้แสดง InfoWindow นี้ หากเปิด InfoWindow ด้วยแท็ก Anchor ระบบจะใช้ตําแหน่งของแท็กแทน
zIndex optional
ประเภท: number optional
InfoWindows ทั้งหมดจะแสดงบนแผนที่ตามลําดับของ zIndex โดยให้ค่าที่สูงขึ้นอยู่หน้า InfoWindows ที่มีค่าต่ํากว่า โดยค่าเริ่มต้น InfoWindows จะแสดงตามละติจูด โดย InfoWindows ของละติจูดที่ต่ํากว่าจะปรากฏหน้า InfoWindows ที่ละติจูดที่สูงกว่า InfoWindows จะแสดงอยู่หน้าเครื่องหมายเสมอ

อินเทอร์เฟซสําหรับ InfoWindowOpenOptions

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

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