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

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

เกริ่นนำ

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

InfoWindow แสดงข้อมูลเกี่ยวกับสถานที่ในออสเตรเลีย

โดยปกติแล้วคุณจะแนบหน้าต่างข้อมูลกับเครื่องหมาย แต่คุณยังแนบหน้าต่างข้อมูลกับละติจูด/ลองจิจูดเฉพาะได้ตามที่อธิบายไว้ในส่วนเกี่ยวกับการเพิ่มหน้าต่างข้อมูลด้านล่าง

หรือพูดกว้างๆ ก็คือ หน้าต่างข้อมูลคือการวางซ้อนประเภทหนึ่ง สำหรับข้อมูลเกี่ยวกับ การวางซ้อนประเภทอื่นๆ โปรดดู การวาดบนแผนที่

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

ตัวสร้าง InfoWindow จะใช้ InfoWindowOptions Object Literal ซึ่งระบุพารามิเตอร์เริ่มต้นสําหรับแสดงหน้าต่างข้อมูล

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;

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;
ดูตัวอย่าง

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

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

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

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

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

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

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

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

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

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

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

การปรับแต่ง

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