หน้าต่างข้อมูล

เลือกแพลตฟอร์ม: Android iOS JavaScript
  1. บทนำ
  2. เพิ่มหน้าต่างข้อมูล
  3. เปิดหน้าต่างข้อมูล
  4. ปิดหน้าต่างข้อมูล
  5. ย้ายหน้าต่างข้อมูล

เกริ่นนำ

InfoWindow จะแสดงเนื้อหา (มักจะเป็นข้อความหรือรูปภาพ) ในหน้าต่างป๊อปอัปเหนือแผนที่ในตำแหน่งที่กำหนด หน้าต่างข้อมูลมีพื้นที่สำหรับเนื้อหาและแท่งทรงยอดที่เรียวลง ส่วนปลายของก้านจะแนบไปกับตำแหน่งที่ระบุบนแผนที่ หน้าต่างข้อมูลจะปรากฏเป็นกล่องโต้ตอบสำหรับโปรแกรมอ่านหน้าจอ

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&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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;
index.ts

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&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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;
index.js
ดูตัวอย่าง

ลองใช้ตัวอย่าง

ตัวอย่างต่อไปนี้กำหนด maxWidth ของหน้าต่างข้อมูล ดูตัวอย่าง

ตั้งโฟกัสบนหน้าต่างข้อมูล

หากต้องการตั้งโฟกัสบนหน้าต่างข้อมูล ให้เรียกเมธอด focus() ลองใช้วิธีนี้ควบคู่กับเหตุการณ์ visible ก่อนที่จะตั้งค่าโฟกัส การเรียกใช้เมธอดนี้ในหน้าต่างข้อมูลที่มองไม่เห็นจะไม่มีผล เรียกใช้ open() เพื่อทำให้หน้าต่างข้อมูลปรากฏขึ้น

ปิดหน้าต่างข้อมูล

โดยค่าเริ่มต้น หน้าต่างข้อมูลจะยังคงเปิดอยู่จนกว่าผู้ใช้จะคลิกตัวควบคุมปิด (ไม้กางเขนด้านขวาบนของหน้าต่างข้อมูล) หรือกดแป้น ESC นอกจากนี้คุณยังปิดหน้าต่างข้อมูลอย่างชัดแจ้งได้ด้วยการเรียกใช้เมธอด close()

เมื่อปิดหน้าต่างข้อมูล โฟกัสจะย้ายกลับไปที่องค์ประกอบที่โฟกัสอยู่ก่อนที่จะเปิดหน้าต่างข้อมูล หากองค์ประกอบดังกล่าวไม่พร้อมใช้งาน ระบบจะย้ายโฟกัสกลับไปที่แผนที่ หากต้องการลบล้างลักษณะการทำงานนี้ คุณฟังเหตุการณ์ closeclick และจัดการโฟกัสด้วยตนเองได้ดังที่แสดงในตัวอย่างต่อไปนี้

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

ย้ายหน้าต่างข้อมูล

การเปลี่ยนตำแหน่งของหน้าต่างข้อมูลทำได้ 2 วิธีดังนี้

  • โทรหา setPosition() ที่หน้าต่างข้อมูล หรือ
  • แนบหน้าต่างข้อมูลไปยังเครื่องหมายใหม่โดยใช้เมธอด InfoWindow.open() หมายเหตุ: หากเรียก open() โดยไม่ผ่านเครื่องหมาย InfoWindow จะใช้ตำแหน่งที่ระบุไว้เมื่อสร้างผ่าน Object Literal ของ InfoWindowOptions

การปรับแต่งช่อง

คลาส InfoWindow ไม่มีการปรับแต่ง โปรดดูตัวอย่างป๊อปอัปที่กำหนดเองเพื่อดูวิธีสร้างป๊อปอัปที่ปรับแต่งเองทั้งหมดแทน