เกริ่นนำ
InfoWindow
จะแสดงเนื้อหา (มักจะเป็นข้อความหรือรูปภาพ) ในหน้าต่างป๊อปอัปเหนือแผนที่ในตำแหน่งที่กำหนด หน้าต่างข้อมูลมีพื้นที่สำหรับเนื้อหาและแท่งทรงยอดที่เรียวลง ส่วนปลายของก้านจะแนบไปกับตำแหน่งที่ระบุบนแผนที่ หน้าต่างข้อมูลจะปรากฏเป็นกล่องโต้ตอบสำหรับโปรแกรมอ่านหน้าจอ
โดยปกติคุณจะแนบหน้าต่างข้อมูลไว้กับเครื่องหมาย แต่คุณยังแนบหน้าต่างข้อมูลไปยังละติจูด/ลองจิจูดเฉพาะได้ตามที่อธิบายไว้ในส่วนการเพิ่มหน้าต่างข้อมูลด้านล่าง
หรือพูดกว้างๆ ก็คือ หน้าต่างข้อมูลคือการวางซ้อนประเภทหนึ่ง สำหรับข้อมูลเกี่ยวกับ การวางซ้อนประเภทอื่นๆ โปรดดู การวาดบนแผนที่
เพิ่มหน้าต่างข้อมูล
ตัวสร้าง
InfoWindow
จะใช้
InfoWindowOptions
ออบเจ็กต์ลิเทอรัล ซึ่งระบุพารามิเตอร์เริ่มต้น
สำหรับการแสดงหน้าต่างข้อมูล
Object Literal ของ InfoWindowOptions
มีช่องต่อไปนี้
content
มีสตริงข้อความหรือโหนด DOM ที่จะแสดงในหน้าต่างข้อมูลpixelOffset
มีออฟเซ็ตจากส่วนปลายของหน้าต่างข้อมูลไปจนถึงตำแหน่งที่มีการตรึงหน้าต่างข้อมูลไว้ ในทางปฏิบัติ คุณไม่ควรระบุช่องนี้ คุณปล่อยค่าดังกล่าวไว้เป็นค่าเริ่มต้นได้position
มีLatLng
ที่เป็นจุดยึดหน้าต่างข้อมูลนี้ หมายเหตุ: อาจแนบInfoWindow
กับออบเจ็กต์Marker
(ในกรณีนี้ตำแหน่งจะขึ้นอยู่กับตำแหน่งของเครื่องหมาย) หรือบนแผนที่เองที่LatLng
ที่ระบุ วิธีหนึ่งในการดึงข้อมูลLatLng
คือการใช้บริการการระบุพิกัดทางภูมิศาสตร์ การเปิดหน้าต่างข้อมูลบนเครื่องหมายจะอัปเดตposition
โดยอัตโนมัติmaxWidth
ระบุความกว้างสูงสุดของหน้าต่างข้อมูลเป็นพิกเซล โดยค่าเริ่มต้น หน้าต่างข้อมูลจะขยายเพื่อให้พอดีกับเนื้อหา และตัดข้อความขึ้นบรรทัดใหม่โดยอัตโนมัติหากหน้าต่างข้อมูลแสดงเต็มแผนที่ หากคุณเพิ่มmaxWidth
หน้าต่างข้อมูลจะตัดคำโดยอัตโนมัติเพื่อบังคับใช้ความกว้างที่ระบุ หากถึงขีดจำกัดความกว้างสูงสุดและมีห้องแนวตั้งบนหน้าจอ หน้าต่างข้อมูลอาจขยายในแนวตั้ง
เนื้อหาของ InfoWindow
อาจมีสตริงข้อความ, ข้อมูลโค้ด HTML หรือองค์ประกอบ DOM หากต้องการตั้งค่าเนื้อหา ให้ระบุใน InfoWindowOptions
หรือเรียก setContent()
ใน InfoWindow
อย่างชัดเจน
หากต้องการปรับขนาดเนื้อหาอย่างชัดเจน คุณอาจใส่เนื้อหาลงในองค์ประกอบ <div>
และจัดรูปแบบ <div>
ด้วย CSS คุณสามารถใช้ CSS เพื่อเปิดใช้การเลื่อนได้ด้วย โปรดทราบว่าหากคุณไม่เปิดใช้การเลื่อนและเนื้อหามีขนาดเกินพื้นที่ว่างในหน้าต่างข้อมูล เนื้อหาอาจล้นออกมาจากหน้าต่างข้อมูล
เปิดหน้าต่างข้อมูล
เมื่อคุณสร้างหน้าต่างข้อมูล หน้าต่างข้อมูลจะไม่แสดงบนแผนที่โดยอัตโนมัติ
หากต้องการทำให้หน้าต่างข้อมูลแสดง คุณต้องเรียกใช้เมธอด open()
ใน InfoWindow
โดยการส่งผ่านออบเจ็กต์ InfoWindowOpenOptions
ที่ระบุตัวเลือกต่อไปนี้
map
ระบุแผนที่หรือภาพพาโนรามาของ Street View ที่จะเปิดanchor
มีจุดยึด (เช่นMarker
) หากตัวเลือกanchor
เป็นnull
หรือไม่ได้ระบุ หน้าต่างข้อมูลจะเปิดขึ้นในพร็อพเพอร์ตี้position
TypeScript
// This example displays a marker at the center of Australia. // When the user clicks the marker, an info window opens. function initMap(): void { const uluru = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } ); const contentString = '<div id="content">' + '<div id="siteNotice">' + "</div>" + '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + '<div id="bodyContent">' + "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " + "sandstone rock formation in the southern part of the " + "Northern Territory, central Australia. It lies 335 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 mi) by road. Kata Tjuta and Uluru are the two major " + "features of the Uluru - Kata Tjuta National Park. Uluru is " + "sacred to the Pitjantjatjara and Yankunytjatjara, the " + "Aboriginal people of the area. It has many springs, waterholes, " + "rock caves and ancient paintings. Uluru is listed as a World " + "Heritage Site.</p>" + '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + "https://en.wikipedia.org/w/index.php?title=Uluru</a> " + "(last visited June 22, 2009).</p>" + "</div>" + "</div>"; const infowindow = new google.maps.InfoWindow({ content: contentString, ariaLabel: "Uluru", }); const marker = new google.maps.Marker({ position: uluru, map, title: "Uluru (Ayers Rock)", }); marker.addListener("click", () => { infowindow.open({ anchor: marker, map, }); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example displays a marker at the center of Australia. // When the user clicks the marker, an info window opens. function initMap() { const uluru = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); const contentString = '<div id="content">' + '<div id="siteNotice">' + "</div>" + '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + '<div id="bodyContent">' + "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " + "sandstone rock formation in the southern part of the " + "Northern Territory, central Australia. It lies 335 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 mi) by road. Kata Tjuta and Uluru are the two major " + "features of the Uluru - Kata Tjuta National Park. Uluru is " + "sacred to the Pitjantjatjara and Yankunytjatjara, the " + "Aboriginal people of the area. It has many springs, waterholes, " + "rock caves and ancient paintings. Uluru is listed as a World " + "Heritage Site.</p>" + '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + "https://en.wikipedia.org/w/index.php?title=Uluru</a> " + "(last visited June 22, 2009).</p>" + "</div>" + "</div>"; const infowindow = new google.maps.InfoWindow({ content: contentString, ariaLabel: "Uluru", }); const marker = new google.maps.Marker({ position: uluru, map, title: "Uluru (Ayers Rock)", }); marker.addListener("click", () => { infowindow.open({ anchor: marker, map, }); }); } window.initMap = initMap;
ลองใช้ตัวอย่าง
ตัวอย่างต่อไปนี้กำหนด maxWidth
ของหน้าต่างข้อมูล
ดูตัวอย่าง
ตั้งโฟกัสบนหน้าต่างข้อมูล
หากต้องการตั้งโฟกัสบนหน้าต่างข้อมูล ให้เรียกเมธอด focus()
ลองใช้วิธีนี้ควบคู่กับเหตุการณ์ visible
ก่อนที่จะตั้งค่าโฟกัส การเรียกใช้เมธอดนี้ในหน้าต่างข้อมูลที่มองไม่เห็นจะไม่มีผล เรียกใช้ open()
เพื่อทำให้หน้าต่างข้อมูลปรากฏขึ้น
ปิดหน้าต่างข้อมูล
โดยค่าเริ่มต้น หน้าต่างข้อมูลจะยังคงเปิดอยู่จนกว่าผู้ใช้จะคลิกตัวควบคุมปิด (ไม้กางเขนด้านขวาบนของหน้าต่างข้อมูล) หรือกดแป้น ESC
นอกจากนี้คุณยังปิดหน้าต่างข้อมูลอย่างชัดแจ้งได้ด้วยการเรียกใช้เมธอด close()
เมื่อปิดหน้าต่างข้อมูล โฟกัสจะย้ายกลับไปที่องค์ประกอบที่โฟกัสอยู่ก่อนที่จะเปิดหน้าต่างข้อมูล หากองค์ประกอบดังกล่าวไม่พร้อมใช้งาน
ระบบจะย้ายโฟกัสกลับไปที่แผนที่ หากต้องการลบล้างลักษณะการทำงานนี้ คุณฟังเหตุการณ์ closeclick
และจัดการโฟกัสด้วยตนเองได้ดังที่แสดงในตัวอย่างต่อไปนี้
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
ย้ายหน้าต่างข้อมูล
การเปลี่ยนตำแหน่งของหน้าต่างข้อมูลทำได้ 2 วิธีดังนี้
- โทรหา
setPosition()
ที่หน้าต่างข้อมูล หรือ - แนบหน้าต่างข้อมูลไปยังเครื่องหมายใหม่โดยใช้เมธอด
InfoWindow.open()
หมายเหตุ: หากเรียกopen()
โดยไม่ผ่านเครื่องหมายInfoWindow
จะใช้ตำแหน่งที่ระบุไว้เมื่อสร้างผ่าน Object Literal ของInfoWindowOptions
การปรับแต่งช่อง
คลาส InfoWindow
ไม่มีการปรับแต่ง โปรดดูตัวอย่างป๊อปอัปที่กำหนดเองเพื่อดูวิธีสร้างป๊อปอัปที่ปรับแต่งเองทั้งหมดแทน