Cửa sổ thông tin

Chọn nền tảng: Android iOS JavaScript
  1. Giới thiệu
  2. Thêm cửa sổ thông tin
  3. Mở cửa sổ thông tin
  4. Đóng cửa sổ thông tin
  5. Di chuyển cửa sổ thông tin

Giới thiệu

InfoWindow hiển thị nội dung (thường là văn bản hoặc hình ảnh) trong cửa sổ bật lên phía trên bản đồ, tại một vị trí nhất định. Cửa sổ thông tin có một vùng nội dung và một đường viền thuỷ tinh. Phần đầu của đường dây được gắn vào một vị trí cụ thể trên bản đồ. Cửa sổ thông tin xuất hiện dưới dạng Hộp thoại đối với trình đọc màn hình.

Một InfoWindow hiển thị thông tin về một vị trí ở Úc.

Thông thường, bạn sẽ đính kèm một cửa sổ thông tin vào một điểm đánh dấu, nhưng bạn cũng có thể đính kèm một cửa sổ thông tin vào một vĩ độ/kinh độ cụ thể, như được mô tả trong phần về cách thêm cửa sổ thông tin bên dưới.

Nói chung, cửa sổ thông tin là một loại lớp phủ. Để biết thông tin về các loại lớp phủ khác, hãy xem nội dung Vẽ trên bản đồ.

Thêm cửa sổ thông tin

Hàm khởi tạo InfoWindow lấy giá trị cố định cho đối tượng InfoWindowOptions để chỉ định các tham số ban đầu để hiển thị cửa sổ thông tin.

Đối tượng InfoWindowOptions cố định chứa các trường sau:

  • content chứa một chuỗi văn bản hoặc một nút DOM để hiển thị trong cửa sổ thông tin.
  • pixelOffset chứa một mức chênh lệch từ đầu cửa sổ thông tin đến vị trí neo cửa sổ thông tin. Trong thực tế, bạn không cần chỉ định trường này. Bạn có thể để nguyên giá trị mặc định.
  • position chứa LatLng tại đó cửa sổ thông tin này được liên kết. Lưu ý: InfoWindow có thể được đính kèm vào một đối tượng Marker (trong trường hợp đó, vị trí của đối tượng dựa trên vị trí của điểm đánh dấu) hoặc trên chính bản đồ tại một LatLng được chỉ định. Một cách để truy xuất LatLng là sử dụng dịch vụ Mã hoá địa lý. Thao tác mở cửa sổ thông tin trên một điểm đánh dấu sẽ tự động cập nhật position.
  • maxWidth chỉ định chiều rộng tối đa của cửa sổ thông tin tính bằng pixel. Theo mặc định, một cửa sổ thông tin sẽ mở rộng để vừa với nội dung và tự động bao bọc văn bản nếu cửa sổ thông tin đó lấp đầy bản đồ. Nếu bạn thêm một maxWidth, cửa sổ thông tin sẽ tự động bao bọc để thực thi chiều rộng được chỉ định. Nếu cửa sổ thông tin đạt chiều rộng tối đa và có không gian dọc trên màn hình, thì cửa sổ thông tin có thể mở rộng theo chiều dọc.

Nội dung của InfoWindow có thể chứa một chuỗi văn bản, một đoạn mã HTML hoặc một phần tử DOM. Để đặt nội dung, hãy chỉ định nội dung đó trong InfoWindowOptions hoặc gọi setContent() một cách rõ ràng trên InfoWindow.

Nếu muốn xác định kích thước rõ ràng nội dung, bạn có thể đặt nội dung đó vào phần tử <div> và tạo kiểu cho <div> bằng CSS. Bạn cũng có thể sử dụng CSS để bật tính năng cuộn. Xin lưu ý rằng nếu bạn không cuộn và nội dung vượt quá không gian có sẵn trong cửa sổ thông tin, nội dung có thể bị tràn ra khỏi cửa sổ thông tin.

Mở cửa sổ thông tin

Khi bạn tạo một cửa sổ thông tin, cửa sổ đó sẽ không tự động xuất hiện trên bản đồ. Để hiển thị cửa sổ thông tin, bạn phải gọi phương thức open() trên InfoWindow, chuyển một đối tượng InfoWindowOpenOptions chỉ định các tùy chọn sau:

  • map xác định bản đồ hoặc ảnh toàn cảnh trong Chế độ xem phố để mở.
  • anchor chứa điểm neo (ví dụ: Marker). Nếu tuỳ chọn anchornull hoặc không xác định, cửa sổ thông tin sẽ mở ra tại tài sản 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;
Xem ví dụ

Thử mẫu

Ví dụ sau đây đặt maxWidth của cửa sổ thông tin: xem ví dụ.

Đặt tiêu điểm trên cửa sổ thông tin

Để đặt tiêu điểm trên cửa sổ thông tin, hãy gọi phương thức focus(). Hãy cân nhắc sử dụng phương thức này cùng với một sự kiện visible trước khi đặt tiêu điểm. Việc gọi phương thức này trên một cửa sổ thông tin không hiển thị sẽ không có hiệu lực. Gọi open() để hiển thị cửa sổ thông tin.

Đóng cửa sổ thông tin

Theo mặc định, một cửa sổ thông tin vẫn mở cho đến khi người dùng nhấp vào nút điều khiển đóng (một chữ thập ở trên cùng bên phải cửa sổ thông tin) hoặc nhấn phím ESC. Bạn cũng có thể đóng cửa sổ thông tin một cách rõ ràng bằng cách gọi phương thức close().

Khi một cửa sổ thông tin đang đóng, tiêu điểm sẽ chuyển về phần tử được lấy tiêu điểm trước khi cửa sổ thông tin đang mở. Nếu phần tử đó không có sẵn, tiêu điểm sẽ được chuyển trở lại bản đồ. Để ghi đè hành vi này, bạn có thể theo dõi sự kiện closeclick và quản lý tiêu điểm theo cách thủ công như trong ví dụ sau:

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

Di chuyển một cửa sổ thông tin

Có một số cách để thay đổi vị trí của cửa sổ thông tin:

  • Gọi cho setPosition() trên cửa sổ thông tin hoặc
  • Đính kèm cửa sổ thông tin vào điểm đánh dấu mới bằng phương thức InfoWindow.open(). Lưu ý: Nếu bạn gọi open() mà không chuyển điểm đánh dấu, InfoWindow sẽ sử dụng vị trí được chỉ định khi xây dựng thông qua giá trị cố định InfoWindowOptions.

Tuỳ chỉnh

Lớp InfoWindow không cho phép tuỳ chỉnh. Thay vào đó, hãy xem ví dụ về cửa sổ bật lên tuỳ chỉnh để xem cách tạo cửa sổ bật lên hoàn toàn tuỳ chỉnh.