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ở một 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 thân cây được thu nhỏ. Đầu của thân câ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 cho trình đọc màn hình.

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

Thông thường, bạn sẽ đính kèm 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 cửa sổ thông tin với một vĩ độ/kinh độ cụ thể, như được mô tả trong phần về cách thêm cửa sổ thông tin dưới đây.

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 phần Vẽ trên bản đồ.

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

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

Đối tượng cố định InfoWindowOptions 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 giá trị bù trừ từ phần đầu của 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ị này ở giá trị mặc định.
  • position chứa LatLng (gắn cửa sổ thông tin này). Lưu ý: Bạn có thể đính kèm InfoWindow vào đối tượng Marker (trong trường hợp đó, vị trí của đối tượng này dựa trên vị trí của điểm đánh dấu) hoặc trên bản đồ tại LatLng được chỉ định. Một cách để truy xuất LatLng là sử dụng Dịch vụ mã hoá địa lý. Việ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, cửa sổ thông tin sẽ mở rộng để vừa với nội dung của cửa sổ đó và tự động xuống dòng khi cửa sổ thông tin lấp đầy bản đồ. Nếu bạn thêm maxWidth, cửa sổ thông tin sẽ tự động bao bọc để áp dụng chiều rộng đã chỉ định. Nếu cửa sổ thông tin đạt chiều rộng tối đa và có khoảng trống trên màn hình theo chiều dọc, 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. Để thiết lập nội dung, hãy chỉ định nội dung đó trong InfoWindowOptions hoặc gọi setContent() trên InfoWindow một cách rõ ràng.

Nếu muốn xác định kích thước rõ ràng cho 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 bật tính năng cuộn và nội dung vượt quá không gian có sẵn trong cửa sổ thông tin, thì nội dung có thể tràn ra khỏi cửa sổ thông tin.

Mở một cửa sổ thông tin

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

  • map chỉ định bản đồ hoặc ảnh toàn cảnh của Chế độ xem đường phố mà bạn muốn mở.
  • anchor chứa một đ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ở tại thuộc tính 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 thiết lập maxWidth của một cửa sổ thông tin: xem ví dụ.

Đặt tiêu điểm vào cửa sổ thông tin

Để đặt tiêu điểm vào một cửa sổ thông tin, hãy gọi phương thức focus() của cửa sổ đó. 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 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, cửa sổ thông tin sẽ vẫn mở cho đến khi người dùng nhấp vào nút điều khiển đóng (dấu 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 bị đóng, tiêu điểm sẽ quay lại phần tử bạn muốn xem trước khi cửa sổ thông tin đó mở ra. Nếu không có phần tử đó, 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 cửa sổ thông tin

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

  • Gọi setPosition() trên cửa sổ thông tin, hoặc
  • Đính kèm cửa sổ thông tin vào một đ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 truyền điểm đánh dấu, InfoWindow sẽ sử dụng vị trí được chỉ định khi tạo thông qua giá trị cố định đối tượng InfoWindowOptions.

Tuỳ chỉnh

Lớp InfoWindow không cung cấp tính năng 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 một cửa sổ bật lên được tuỳ chỉnh đầy đủ.