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 một cửa sổ bật lên phía trên bản đồ tại một vị trí cụ thể. Cửa sổ thông tin có nội dung và một thân dẹt. Đầu cuống được gắn với một vị trí 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 đ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 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, xem Vẽ trên bản đồ.

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

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

Đối tượng InfoWindowOptions bằng chữ 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 xuất hiện trong cửa sổ thông tin.
  • pixelOffset chứa phần bù trừ ở đầu thông tin cửa sổ đến vị trí mà cửa sổ thông tin được neo vào. Trên thực tế, bạn không cần chỉ định trường này. Bạn có thể để mặc định giá trị.
  • position chứa LatLng mà tại đó thông tin này cố định cửa sổ. 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 chính bản đồ tại một LatLng được chỉ định. Một cách để truy xuất LatLng là sử dụng hàm Dịch vụ mã hoá địa lý. 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 thông tin cửa sổ 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, và tự động gói văn bản nếu 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 để thực thi chiều rộng được chỉ định. Nếu quảng cáo đạt đến chiều rộng tối đa và có chiều dọc trên màn hình, 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 đoạn mã HTML hoặc phần tử DOM. Để đặt 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 rõ kích thước của nội dung, bạn có thể đặt nội dung đó trong một Phần tử <div> và tạo kiểu cho <div> bằng Dịch vụ so sánh giá (CSS). Bạn cũng có thể sử dụng CSS để cho phép cuộn. Xin lưu ý rằng nếu bạn không cho phép cuộn và nội dung vượt quá khoảng trống có sẵn trong thông tin nội dung có thể bị 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 InfoWindowOpenOptions giá trị cố định đối tượng chỉ định các tùy chọn sau:

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

Dùng 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 focus() của cửa sổ này . Hãy cân nhắc sử dụng phương thức này cùng với visible trước khi đặt tiêu điểm. Gọi phương thức này trên một thông tin không hiển thị sẽ không có hiệu lực. Gọi open() tới hãy hiển thị một cửa sổ thông tin.

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

Theo mặc định, cửa sổ thông tin vẫn mở cho đến khi người dùng nhấp vào nút đóng Ctrl (dấu chữ thập ở trên cùng bên phải của 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 close() của cửa sổ .

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

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

Di chuyển 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 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 cách sử dụng 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 Đối tượng InfoWindowOptions bằng chữ.

Tuỳ chỉnh

Lớp InfoWindow không cung cấp tính năng tuỳ chỉnh. Thay vào đó, xem tuỳ chỉnh ví dụ về cửa sổ bật lên để xem cách tạo cửa sổ bật lên được tuỳ chỉnh hoàn toàn.