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

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

บทนำ

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

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

โดยปกติแล้วคุณจะแนบหน้าต่างข้อมูลไปกับ 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&#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() ถึง ทำให้หน้าต่างข้อมูลปรากฏขึ้น

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

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

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

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

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

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

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

การปรับแต่ง

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