บทนำ
InfoWindow
แสดงเนื้อหา (โดยปกติจะเป็นข้อความหรือรูปภาพ) ใน
หน้าต่างป๊อปอัปเหนือแผนที่ตามตำแหน่งที่ระบุ หน้าต่างข้อมูลมีเนื้อหา
และก้านแคบ ส่วนปลายของก้านติดกับ
ตำแหน่งบนแผนที่ หน้าต่างข้อมูลจะปรากฏเป็นกล่องโต้ตอบสำหรับโปรแกรมอ่านหน้าจอ
![InfoWindow ที่แสดงข้อมูลเกี่ยวกับสถานที่ในออสเตรเลีย](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/javascript/images/info-window.png?authuser=19&hl=th)
โดยปกติแล้วคุณจะแนบหน้าต่างข้อมูลไปกับ marker แต่ยัง แนบหน้าต่างข้อมูลลงในละติจูด/ลองจิจูดเฉพาะ ตามที่อธิบายไว้ใน ในการเพิ่มหน้าต่างข้อมูลด้านล่าง
พูดกว้างๆ ก็คือ หน้าต่างข้อมูลเป็นการวางซ้อนประเภทหนึ่ง สำหรับข้อมูลเกี่ยวกับ การวางซ้อนประเภทอื่นๆ โปรดดู ภาพวาดบนแผนที่
เพิ่มหน้าต่างข้อมูล
เครื่องมือสร้าง InfoWindow
ใช้เวลา
ลิเทอรัลของออบเจ็กต์
InfoWindowOptions
ซึ่งระบุค่าเริ่มต้น
พารามิเตอร์สำหรับการแสดงหน้าต่างข้อมูล
ลิเทอรัลออบเจ็กต์ 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()
ถึง
ทำให้หน้าต่างข้อมูลปรากฏขึ้น
ปิดหน้าต่างข้อมูล
โดยค่าเริ่มต้น หน้าต่างข้อมูลจะเปิดอยู่จนกว่าผู้ใช้จะคลิกปิด
Control (รูปกากบาทที่ด้านขวาบนของหน้าต่างข้อมูล) หรือกดแป้น ESC
คุณยังสามารถปิดหน้าต่างข้อมูลอย่างชัดแจ้งโดยเรียกใช้ close()
ของหน้าต่างข้อมูลได้ด้วย
เมื่อปิดหน้าต่างข้อมูล โฟกัสจะย้ายกลับไปที่องค์ประกอบเดิม
โฟกัสก่อนที่หน้าต่างข้อมูลจะเปิดขึ้น หากองค์ประกอบนั้นไม่พร้อมใช้งาน
โฟกัสจะถูกย้ายกลับไปที่แผนที่ หากต้องการลบล้างลักษณะการทำงานนี้ คุณสามารถฟัง
เหตุการณ์ closeclick
และจัดการโฟกัสด้วยตนเองตามที่แสดงใน
ตัวอย่างต่อไปนี้
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
ย้ายหน้าต่างข้อมูล
การเปลี่ยนตำแหน่งของหน้าต่างข้อมูลทำได้ 2 วิธีดังนี้
- โทรหา
setPosition()
บนหน้าต่างข้อมูล หรือ - ติดหน้าต่างข้อมูลไว้กับเครื่องหมายใหม่โดยใช้
InfoWindow.open()
วิธี หมายเหตุ: หากคุณโทรหาopen()
InfoWindow
จะใช้ตำแหน่งโดยไม่ผ่านเครื่องหมาย ที่ระบุเมื่อก่อสร้างผ่าน ค่าลิเทอรัลของออบเจ็กต์InfoWindowOptions
การปรับแต่ง
คลาส InfoWindow
ไม่มีการปรับแต่ง แต่
โปรดดู
กำหนดเอง
ตัวอย่างป๊อปอัป
เพื่อดูวิธีสร้างป๊อปอัป
ที่ปรับแต่งเองทั้งหมด