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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript
  1. บทนำ
  2. เพิ่มหน้าต่างข้อมูล
  3. เปิดหน้าต่างข้อมูล
  4. ปิดหน้าต่างข้อมูล
  5. ย้ายหน้าต่างข้อมูล

บทนำ

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

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

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

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

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

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

ออบเจ็กต์ลิฟต์ของ InfoWindowOptions มีช่องต่อไปนี้

  • content มีสตริงข้อความหรือโหนด DOM ที่จะแสดงในหน้าต่างข้อมูล
  • pixelOffset มีออฟเซ็ตจากส่วนท้ายของหน้าต่างข้อมูลไปยังตําแหน่งที่หน้าต่างข้อมูลถูกตรึงอยู่ ในทางปฏิบัติ คุณไม่จําเป็นต้องระบุช่องนี้ คุณปล่อยให้ค่าดังกล่าวเป็นค่าเริ่มต้นได้
  • position มี LatLng ที่แท็ก Anchor ของหน้าต่างข้อมูลนี้ หมายเหตุ: อาจแนบ 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 จะใช้ตําแหน่งที่ระบุเมื่อสร้างผ่านโครงสร้างออบเจ็กต์ InfoWindowOptions

การปรับแต่ง

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