- Giới thiệu
- Thêm cửa sổ thông tin
- Mở cửa sổ thông tin
- Đóng cửa sổ thông tin
- 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.](https://developers.google.com/static/maps/documentation/javascript/images/info-window.png?hl=vi)
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ứaLatLng
mà tại đó thông tin này cố định cửa sổ. Lưu ý: Bạn có thể đính kèmInfoWindow
vào đối tượngMarker
(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ộtLatLng
được chỉ định. Một cách để truy xuấtLatLng
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ậtposition
.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êmmaxWidth
, 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ọnanchor
lànull
hoặc không xác định, thông tin sẽ mở ra tại thuộc tínhposition
.
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 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.</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 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.</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;
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ọiopen()
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ượngInfoWindowOptions
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.