Info Window

Lớp InfoWindow

Lớp google.maps.InfoWindow

Lớp phủ trông giống như bong bóng và thường được kết nối với đ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])
Thông số: 
Tạo cửa sổ thông tin với các tuỳ chọn cho sẵ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 vị trí được chỉ định trong các tuỳ chọn. Trừ khi bạn tắt tính năng tự động kéo, InfoWindow sẽ xoay bản đồ để có thể nhìn thấy được bản đồ khi được mở. Sau khi xây dựng InfoWindow, bạn phải gọi lệnh mở để hiển thị cửa sổ này trên bản đồ. Người dùng có thể nhấp vào nút đóng trên InfoWindow để xoá nó khỏi bản đồ hoặc nhà phát triển có thể gọi close() để có hiệu quả tương tự.
isOpen
Loại:  boolean
Kiểm tra xem InfoWindow có đang mở hay không.
close
close()
Thông số: Không có
Giá trị trả về: Không có
Đóng InfoWindow này bằng cách xoá nó khỏi cấu trúc DOM.
focus
focus()
Thông 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 vào đó. Không thể lấy tiêu điểm vào một InfoWindow không hiển thị.
getContent
getContent()
Thông số: Không có
Giá trị trả về:  string|Element|Text|null|undefined Nội dung của InfoWindow này. Giống như nội dung đã được đặt trước đó.
getHeaderContent
getHeaderContent()
Thông số: Không có
Giá trị trả về:  string|Element|Text|null|undefined Nội dung tiêu đề của InfoWindow này. Vui lòng xem InfoWindowOptions.headerContent.
getHeaderDisabled
getHeaderDisabled()
Thông số: Không có
Giá trị trả về:  boolean|undefined Liệu toàn bộ hàng tiêu đề có bị tắt hay không. Vui lòng xem InfoWindowOptions.headerDisabled.
getPosition
getPosition()
Thông số: Không có
Giá trị trả về:  LatLng|null|undefined Vị trí LatLng của InfoWindow này.
getZIndex
getZIndex()
Thông số: Không có
Giá trị trả về:  number zIndex của InfoWindow này.
open
open([options, anchor])
Thông số: 
  • options:  InfoWindowOpenOptions|Map|StreetViewPanorama optional Một đối tượng InfoWindowOpenOptions (nên dùng) hoặc là map|panorama để hiển thị InfoWindow này.
  • anchor:  MVCObject|AdvancedMarkerElement optional Điểm neo mà InfoWindow này sẽ được định vị. Nếu liên kết khác rỗng, InfoWindow sẽ được đặt ở trên cùng chính giữa của neo. 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 (khi có sẵn).
Giá trị trả về: Không có
Mở InfoWindow này trên bản đồ cho sẵn. Bạn có thể tuỳ ý liên kết InfoWindow với quảng cáo cố định. Trong API lõi, điểm neo duy nhất là lớp Marker. Tuy nhiên, một neo có thể là bất kỳ MVCObject nào hiển thị thuộc tính LatLng position và có thể là một thuộc tính Point anchorPoint để tính toán pixelOffset (xem InfoWindowOptions). anchorPoint là phần chênh 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. Để tránh 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])
Thông số: 
  • content:  string|Element|Text optional Nội dung sẽ hiện trên InfoWindow này.
Giá trị trả về: Không có
setHeaderContent
setHeaderContent([headerContent])
Thông số: 
Giá trị trả về: Không có
setHeaderDisabled
setHeaderDisabled([headerDisabled])
Thông số: 
Giá trị trả về: Không có
setOptions
setOptions([options])
Thông số: 
Giá trị trả về: Không có
setPosition
setPosition([position])
Thông số: 
  • position:  LatLng|LatLngLiteral optional Vị trí LatLng mà tại đó thông tin InfoWindow này được hiển thị.
Giá trị trả về: Không có
setZIndex
setZIndex(zIndex)
Thông số: 
  • zIndex:  number Chỉ mục z cho InfoWindow này. InfoWindow có chỉ mục z lớn hơn sẽ được hiển thị trước tất cả các InfoWindows 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ẽ được kích hoạt bất cứ khi nào InfoWindow đóng. Ví dụ: có thể xảy ra lỗi bằng cách gọi phương thức InfoWindow.close, nhấn phím Escape để đó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. Có thể bạn muốn theo dõi sự kiện này nếu đang tự động tạo nội dung trong cửa sổ thông tin.
headercontent_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 của tiêu đề 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ị đầy đủ. Sự kiện này không được kích hoạt khi InfoWindow được di chuyển ra khỏi màn hình 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

Giao diện google.maps.InfoWindowOptions

Đối tượng InfoWindowOptions dùng để xác định các thuộc tính có thể đặt trên InfoWindow.
ariaLabel optional
Loại:  string optional
AriaLabel để gán cho InfoWindow.
content optional
Loại:  string|Element|Text optional
Nội dung 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 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 kéo bản đồ để InfoWindow hiển thị hoàn toàn khi mở.
headerContent optional
Loại:  string|Element|Text optional
Nội dung 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 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 bạn đặt chính sách này thành true, thì tiêu đề sẽ bị xoá để ẩn nội dung tiêu đề và nút đóng.
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 là bao nhiêu. Giá trị này chỉ được xem xét nếu được đặt trước lệnh 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 gọ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 là bao nhiêu. 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 tệp ánh xạ (tính bằng pixel). Giá trị này chỉ được xem xét nếu được đặt trước lệnh 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 gọi open().
pixelOffset optional
Loại:  Size optional
Độ lệch, tính bằng pixel, của đầu cửa sổ thông tin từ điểm trên bản đồ có toạ độ địa lý mà cửa sổ thông tin được neo vào. Nếu một InfoWindow được mở bằng một quảng cáo cố định, thì pixelOffset sẽ được tính toán từ thuộc tính anchorPoint của điểm liên kết đó.
position optional
Loại:  LatLng|LatLngLiteral optional
LatLng hiển thị InfoWindow này. Nếu InfoWindow được mở bằng một neo, thì vị trí của neo sẽ được sử dụng thay thế.
zIndex optional
Loại:  number optional
Tất cả InfoWindows được hiển thị trên bản đồ theo thứ tự zIndex của chúng, với giá trị cao hơn hiển thị trước InfoWindows với giá trị thấp hơn. Theo mặc định, InfoWindows được hiển thị theo vĩ độ của chúng, với InfoWindows có vĩ độ thấp hơn xuất hiện trước InfoWindows ở vĩ độ cao hơn. InfoWindows luôn được hiển thị trước điểm đánh dấu.

Giao diện InfoWindowOpenOptions

Giao diện google.maps.InfoWindowOpenOptions

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