Places UI Kit: Một thư viện có thể sử dụng ngay, cung cấp không gian tuỳ chỉnh và kiểm soát cho nhà phát triển. Hãy dùng thử và chia sẻ ý kiến của bạn về trải nghiệm dùng Bộ giao diện người dùng.

Cửa sổ thông tin

Chọn nền tảng: Android iOS JavaScript

Giới thiệu

An 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í nhất định. Cửa sổ thông tin có một vùng nội dung và một thân thon. Đầu thân được gắn vào một vị trí đã chỉ định 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.

Thông thường, bạn sẽ gắn 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ể gắn một cửa sổ thông tin vào một vĩ độ/kinh độ cụ thể, như mô tả trong phần 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 bài viết Vẽ trên bản đồ.

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

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

Đối tượng InfoWindowOptions dạng ký tự 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 độ lệch từ đầu cửa sổ thông tin đến vị trí mà cửa sổ thông tin được neo. Trong thực tế, bạn không cần chỉ định trường này. Bạn có thể để trường này ở giá trị mặc định
position chứa LatLng mà cửa sổ thông tin này được neo. Lưu ý: Bạn có thể gắn InfoWindow vào một đố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 đã chỉ định. Một cách để truy xuất LatLng là sử dụng dịch vụ Mã hoá địa lý. Việc mở một 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, và tự động xuống dòng 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 xuống dòng để thực thi chiều rộng đã chỉ định. Nếu đạt đến chiều rộng tối đa và có khoảng trống theo chiều 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() trên InfoWindow một cách rõ ràng.

Nếu muốn định kích thước nội dung một cách rõ ràng, bạn có thể đặt nội dung đó trong một <div> phần tử 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.

Các phương pháp hay nhất: Để mang lại trải nghiệm tốt nhất cho người dùng, chỉ nên mở một cửa sổ thông tin trên bản đồ tại một thời điểm. Nhiều cửa sổ thông tin sẽ khiến bản đồ trông lộn xộn. Nếu chỉ cần một cửa sổ thông tin tại một thời điểm, bạn có thể chỉ tạo một InfoWindow đối tượng và mở đối tượng đó ở nhiều vị trí hoặc điểm đánh dấu khi có các sự kiện trên bản đồ, chẳng hạn như người dùng nhấp vào. Nếu cần nhiều cửa sổ thông tin, bạn có thể hiển thị nhiều InfoWindow đối tượng cùng một lúc.

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 hiển thị 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, truyền một đối tượng InfoWindowOpenOptions dạng ký tự chỉ định các lựa chọn sau:

map chỉ định bản đồ hoặc ảnh toàn cảnh trong Chế độ xem đường phố mà bạn muốn mở.
anchor chứa một điểm neo (ví dụ: Marker). Nếu lựa chọn anchor là null hoặc không xác định, thì 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.

async function initMap(): Promise<void> {
  // Import the needed libraries.
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  // Get the map element and the inner map from it.
  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  const innerMap = mapElement.innerMap;

  // Get the center of the map.
  const center = mapElement.center;

  // Create the info window content.
  const heading = document.createElement("h1");
  heading.textContent = "Uluru (Ayers Rock)";

  const content = document.createElement("div");

  const infoParagraph = document.createElement("p");
  infoParagraph.textContent =
  `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 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.`;

  content.appendChild(infoParagraph);

  const link = document.createElement("a");
  link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.target = "_blank";
  content.appendChild(link);

  // Create the info window.
  const infowindow = new google.maps.InfoWindow({
    headerContent: heading,
    content: content,
    ariaLabel: "Uluru",
    maxWidth: 500, // Set max width (optional).
  });

  // Create the marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: center,
    map: innerMap,
    title: "Uluru (Ayers Rock)",
    gmpClickable: true,
  });

  // Open the info window when the map loads.
  infowindow.open({
    anchor: marker,
    map: innerMap,
  });

  // Open the info window when the marker is clicked.
  marker.addEventListener("gmp-click", () => {
    infowindow.open({
      anchor: marker,
      map: innerMap,
    });
  });
}

initMap();index.ts

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    // Get the map element and the inner map from it.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    // Get the center of the map.
    const center = mapElement.center;
    // Create the info window content.
    const heading = document.createElement("h1");
    heading.textContent = "Uluru (Ayers Rock)";
    const content = document.createElement("div");
    const infoParagraph = document.createElement("p");
    infoParagraph.textContent =
        `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 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.`;
    content.appendChild(infoParagraph);
    const link = document.createElement("a");
    link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.target = "_blank";
    content.appendChild(link);
    // Create the info window.
    const infowindow = new google.maps.InfoWindow({
        headerContent: heading,
        content: content,
        ariaLabel: "Uluru",
        maxWidth: 500, // Set max width (optional).
    });
    // Create the marker.
    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: "Uluru (Ayers Rock)",
        gmpClickable: true,
    });
    // Open the info window when the map loads.
    infowindow.open({
        anchor: marker,
        map: innerMap,
    });
    // Open the info window when the marker is clicked.
    marker.addEventListener("gmp-click", () => {
        infowindow.open({
            anchor: marker,
            map: innerMap,
        });
    });
}
initMap();index.js

Xem ví dụ

Dùng thử mẫu

JSFiddle.net

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

Đặt tiêu điểm vào một 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 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. Hãy gọi open() để hiển thị một 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 sẽ vẫn mở cho đến khi người dùng nhấp vào nút điều khiển đóng (dấu nhân ở 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 phương thức close() của cửa sổ đó.

Khi một cửa sổ thông tin bị đóng, tiêu điểm sẽ di chuyển trở lại phần tử đang được lấy tiêu điểm trước khi cửa sổ thông tin được mở. Nếu phần tử đó không có sẵn, tiêu điểm sẽ di 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ư minh hoạ 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
Gắn 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, thì InfoWindow sẽ sử dụng vị trí được chỉ định khi tạo thông qua đối tượng InfoWindowOptions dạng giá trị cố định.

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 để biết cách tạo một cửa sổ bật lên được tuỳ chỉnh hoàn toàn.