Info Window

Lớp InfoWindow

Lớp google.maps.InfoWindow

Một lớp phủ trông giống như một bong bóng và thường được kết nối với một điểm đánh dấu.

Lớp này mở rộng MVCObject.

Truy cập bằng cách gọi const {InfoWindow} = await google.maps.importLibrary("maps") hoặc const {InfoWindow} = await google.maps.importLibrary("streetView").
Xem Thư viện trong Maps JavaScript API.
InfoWindow
InfoWindow([opts])
Tham số: 
Tạo một cửa sổ thông tin bằng các lựa chọn đã cho. Bạn có thể đặt InfoWindow trên bản đồ tại một vị trí cụ thể hoặc phía trên một điểm đánh dấu, tuỳ thuộc vào nội dung được chỉ định trong các lựa chọn. Trừ phi bạn tắt tính năng tự động di chuyển, nếu không, InfoWindow sẽ di chuyển bản đồ để hiển thị chính nó khi được mở. Sau khi tạo một InfoWindow, bạn phải gọi open để hiển thị InfoWindow đó trên bản đồ. Người dùng có thể nhấp vào nút đóng trên InfoWindow để xoá nút này khỏi bản đồ, hoặc nhà phát triển có thể gọi close() để có cùng hiệu ứng.
isOpen
Loại:  boolean
Kiểm tra xem InfoWindow có đang mở hay không.
close
close()
Tham số:  Không có
Giá trị trả về:  Không có
Đóng InfoWindow này bằng cách xoá InfoWindow đó khỏi cấu trúc DOM.
focus
focus()
Tham số:  Không có
Giá trị trả về:  Không có
Đặt tiêu điểm vào InfoWindow này. Bạn nên cân nhắc sử dụng phương thức này cùng với sự kiện visible để đảm bảo rằng InfoWindow hiển thị trước khi đặt tiêu điểm lên đó. Bạn không thể lấy tiêu điểm cho một InfoWindow không hiển thị.
getContent
getContent()
Tham số:  Không có
Giá trị trả về:  string|Element|Text|null|undefined Nội dung của InfoWindow này. Giống với nội dung đã được đặt trước đó.
getHeaderContent
getHeaderContent()
Tham số:  Không có
Giá trị trả về:  string|Element|Text|null|undefined Nội dung tiêu đề của InfoWindow này. Hãy xem InfoWindowOptions.headerContent.
getHeaderDisabled
getHeaderDisabled()
Tham số:  Không có
Giá trị trả về:  boolean|undefined Toàn bộ hàng tiêu đề có bị vô hiệu hoá hay không. Hãy xem InfoWindowOptions.headerDisabled.
getPosition
getPosition()
Tham số:  Không có
Giá trị trả về:  LatLng|null|undefined Vị trí LatLng của InfoWindow này.
getZIndex
getZIndex()
Tham số:  Không có
Giá trị trả về:  number zIndex của InfoWindow này.
open
open([options, anchor])
Tham số: 
  • options:  InfoWindowOpenOptions|Map|StreetViewPanorama optional Đối tượng InfoWindowOpenOptions (nên dùng) hoặc bản đồ|ảnh toàn cảnh để hiển thị InfoWindow này.
  • anchor:  MVCObject|AdvancedMarkerElement optional Điểm đánh dấu mà InfoWindow này sẽ được đặt. Nếu giá trị cố định không phải là giá trị rỗng, thì InfoWindow sẽ được đặt ở vị trí trên cùng ở giữa của giá trị cố định. InfoWindow sẽ được kết xuất trên cùng một bản đồ hoặc ảnh toàn cảnh với điểm neo (nếu có).
Giá trị trả về:  Không có
Mở InfoWindow này trên bản đồ đã cho. Bạn có thể liên kết một InfoWindow với một điểm neo (không bắt buộc). Trong API cốt lõi, điểm neo duy nhất là lớp Marker. Tuy nhiên, một điểm đánh dấu có thể là bất kỳ MVCObject nào hiển thị thuộc tính LatLng position và tuỳ ý là thuộc tính Point anchorPoint để tính toán pixelOffset (xem InfoWindowOptions). anchorPoint là độ lệch từ vị trí của điểm neo đến đầu của InfoWindow. Bạn nên sử dụng giao diện InfoWindowOpenOptions làm đối số duy nhất cho phương thức này. Để ngăn thay đổi tiêu điểm của trình duyệt khi mở, hãy đặt InfoWindowOpenOptions.shouldFocus thành false.
setContent
setContent([content])
Tham số: 
  • content:  string|Element|Text optional Nội dung mà InfoWindow này sẽ hiển thị.
Giá trị trả về:  Không có
setHeaderContent
setHeaderContent([headerContent])
Tham số: 
Giá trị trả về:  Không có
setHeaderDisabled
setHeaderDisabled([headerDisabled])
Tham số: 
Giá trị trả về:  Không có
setOptions
setOptions([options])
Tham số: 
Giá trị trả về:  Không có
setPosition
setPosition([position])
Tham số: 
  • position:  LatLng|LatLngLiteral optional Vị trí LatLng để hiển thị InfoWindow này.
Giá trị trả về:  Không có
setZIndex
setZIndex(zIndex)
Tham số: 
  • zIndex:  number Chỉ mục z cho InfoWindow này. InfoWindow có chỉ mục z lớn hơn sẽ xuất hiện trước tất cả các InfoWindow khác có chỉ mục z thấp hơn.
Giá trị trả về:  Không có
Kế thừa: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
close
function()
Đối số:  Không có
Sự kiện này sẽ kích hoạt bất cứ khi nào InfoWindow đóng. Ví dụ: điều này có thể xảy ra khi gọi phương thức InfoWindow.close, nhấn phím thoát để đóng InfoWindow hoặc nhấp vào nút đóng hoặc di chuyển InfoWindow sang một bản đồ khác.
closeclick
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi người dùng nhấp vào nút đóng.
content_changed
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi thuộc tính nội dung thay đổi.
domready
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi <div> chứa nội dung của InfoWindow được đính kèm vào DOM. Bạn nên theo dõi sự kiện này nếu đang tạo nội dung cửa sổ thông tin một cách linh động.
headercontent_changed
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi thuộc tính headerContent thay đổi.
headerdisabled_changed
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi thuộc tính headerDisabled thay đổi.
position_changed
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi thuộc tính vị trí thay đổi.
visible
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi InfoWindow hiển thị hoàn toàn. Sự kiện này không kích hoạt khi InfoWindow được di chuyển ra khỏi rồi quay lại màn hình.
zindex_changed
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi zIndex của InfoWindow thay đổi.

Giao diện InfoWindowOptions

google.maps.InfoWindowOptionsgiao diện

Đối tượng InfoWindowOptions dùng để xác định các thuộc tính có thể được đặt trên một InfoWindow.
ariaLabel optional
Loại:  string optional
AriaLabel để chỉ định cho InfoWindow.
content optional
Loại:  string|Element|Text optional
Nội dung sẽ hiển thị trong InfoWindow. Đây có thể là một phần tử HTML, một chuỗi văn bản thuần tuý hoặc một chuỗi chứa HTML. InfoWindow sẽ được định kích thước theo nội dung. Để đặt kích thước rõ ràng cho nội dung, hãy đặt nội dung thành một phần tử HTML có kích thước đó.
disableAutoPan optional
Loại:  boolean optional
Mặc định: false
Tắt tính năng di chuyển bản đồ để InfoWindow hiển thị đầy đủ khi mở.
headerContent optional
Loại:  string|Element|Text optional
Nội dung sẽ hiển thị trong hàng tiêu đề InfoWindow. Đây có thể là một phần tử HTML hoặc một chuỗi văn bản thuần tuý. InfoWindow sẽ được định kích thước theo nội dung. Để đặt kích thước rõ ràng cho nội dung tiêu đề, hãy đặt headerContent thành một phần tử HTML có kích thước đó.
headerDisabled optional
Loại:  boolean optional
Tắt toàn bộ hàng tiêu đề trong InfoWindow. Khi được đặt thành true, tiêu đề sẽ bị xoá để nội dung tiêu đề và nút đóng sẽ bị ẩn.
maxWidth optional
Loại:  number optional
Chiều rộng tối đa của InfoWindow, bất kể chiều rộng của nội dung. Giá trị này chỉ được xem xét nếu bạn đặt giá trị trước khi gọi đến open(). Để thay đổi chiều rộng tối đa khi thay đổi nội dung, hãy gọi close(), setOptions() rồi open().
minWidth optional
Loại:  number optional
Chiều rộng tối thiểu của InfoWindow, bất kể chiều rộng của nội dung. Khi sử dụng thuộc tính này, bạn nên đặt minWidth thành một giá trị nhỏ hơn chiều rộng của bản đồ (tính bằng pixel). Giá trị này chỉ được xem xét nếu bạn đặt giá trị trước khi gọi đến open(). Để thay đổi chiều rộng tối thiểu khi thay đổi nội dung, hãy gọi close(), setOptions(), rồi open().
pixelOffset optional
Loại:  Size optional
Độ lệch (tính bằng pixel) của đầu cửa sổ thông tin so với điểm trên bản đồ mà cửa sổ thông tin được neo tại toạ độ địa lý. Nếu InfoWindow được mở bằng một neo, thì pixelOffset sẽ được tính từ thuộc tính anchorPoint của neo.
position optional
Loại:  LatLng|LatLngLiteral optional
LatLng mà bạn muốn hiển thị InfoWindow này. Nếu InfoWindow được mở bằng một neo, thì vị trí của neo sẽ được dùng thay thế.
zIndex optional
Loại:  number optional
Tất cả InfoWindow đều xuất hiện trên bản đồ theo thứ tự zIndex, với các giá trị cao hơn xuất hiện trước InfoWindow có giá trị thấp hơn. Theo mặc định, InfoWindow sẽ xuất hiện theo vĩ độ, trong đó InfoWindow ở vĩ độ thấp hơn sẽ xuất hiện trước InfoWindow ở vĩ độ cao hơn. InfoWindows luôn xuất hiện trước các điểm đánh dấu.

Giao diện InfoWindowOpenOptions

google.maps.InfoWindowOpenOptionsgiao diện

Các lựa chọn để mở InfoWindow
anchor optional
Loại:  MVCObject|AdvancedMarkerElement optional
Điểm đánh dấu mà InfoWindow này sẽ được đặt. Nếu giá trị cố định không phải là giá trị rỗng, thì InfoWindow sẽ được đặt ở vị trí trên cùng ở giữa của giá trị cố định. InfoWindow sẽ được kết xuất trên cùng một bản đồ hoặc ảnh toàn cảnh với điểm neo (nếu có).
map optional
Loại:  Map|StreetViewPanorama optional
Bản đồ hoặc ảnh toàn cảnh mà InfoWindow này sẽ hiển thị.
shouldFocus optional
Loại:  boolean optional
Có nên di chuyển tiêu điểm vào bên trong InfoWindow khi cửa sổ này mở hay không. Khi bạn không đặt thuộc tính này hoặc khi bạn đặt thuộc tính này thành null hoặc undefined, một phương pháp phỏng đoán sẽ được dùng để quyết định xem có nên di chuyển tiêu điểm hay không. Bạn nên đặt rõ ràng thuộc tính này cho phù hợp với nhu cầu của mình vì phương pháp phỏng đoán có thể thay đổi và có thể không hoạt động hiệu quả cho mọi trường hợp sử dụng.