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 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 API JavaScript Maps.
InfoWindow
InfoWindow([opts])
Các thông số: 
Tạo một cửa sổ thông tin có các tuỳ chọn cho trước. Bạn có thể đặt mộ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 tuỳ chọn. Trừ phi tính năng tự động xoay bị tắt, InfoWindow sẽ xoay 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ị 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ó cùng một hiệu ứng.
close
close()
Tham số: Không có
Giá trị trả lại hàng: Không có
Đóng InfoWindow này bằng cách xoá nó khỏi cấu trúc DOM.
focus
focus()
Tham số: Không có
Giá trị trả lại hàng: Không có
Đặt tiêu điểm cho 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 InfoWindow hiển thị trước khi đặt tiêu điểm vào nó. Không thể lấy tiêu điểm 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 như những gì được đặt trước đó làm nội dung.
getPosition
getPosition()
Tham số: Không có
Return Value:  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])
Các thông số: 
  • options:  InfoWindowOpenOptions|Map|StreetViewPanorama optional Một đối tượng InfoWindowOpenOptions (nên dùng) hoặc bản đồ|toàn cảnh để kết xuất InfoWindow này.
  • anchor:  MVCObject|AdvancedMarkerElement optional Neo mà InfoWindow sẽ được định vị vào. Nếu liên kết khác rỗng, InfoWindow sẽ được đặt ở trên cùng chính giữa liên kết. InfoWindow sẽ hiển thị trên cùng bản đồ hoặc ảnh toàn cảnh như điểm neo (nếu có).
Giá trị trả lại hàng: Không có
Mở InfoWindow này trên bản đồ đã cho. Nếu muốn, bạn có thể liên kết một InfoWindow với một neo. Trong API cốt lõi, liên kết duy nhất là lớp Marker. Tuy nhiên, neo có thể là bất kỳ MVCObject nào hiển thị thuộc tính LatLng position và tuỳ chọn một thuộc tính Point anchorPoint để tính toán pixelOffset (xem InfoWindowOptions). anchorPoint là độ lệch từ vị trí của liên kết đế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 việc thay đổi tiêu điểm trình duyệt khi đang mở, hãy đặt InfoWindowOpenOptions.shouldFocus thành false.
setContent
setContent([content])
Các thông số: 
  • content:  string|Element|Text optional Nội dung sẽ hiển thị qua InfoWindow.
Giá trị trả lại hàng: Không có
setOptions
setOptions([options])
Các thông số: 
Giá trị trả lại hàng: Không có
setPosition
setPosition([position])
Các thông số: 
  • position:  LatLng|LatLngLiteral optional Vị trí LatLng mà tại đó sẽ hiển thị InfoWindow này.
Giá trị trả lại hàng: Không có
setZIndex
setZIndex(zIndex)
Các thông số: 
  • zIndex:  number Chỉ mục z cho InfoWindow này. Một InfoWindow có chỉ mục z lớn hơn sẽ 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ả lại hàng: 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 được kích hoạt bất cứ khi nào InfoWindow đóng. Ví dụ: bạn có thể 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 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 có thể cần theo dõi sự kiện này nếu bạn đang xây dựng nội dung cửa sổ thông tin một cách linh động.
Betaheadercontent_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.
Betaheaderdisabled_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 bị kéo rồi quay lại trên 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 một InfoWindow.
ariaLabel optional
Loại:  string optional
AriaLabel để gán cho InfoWindow.
content optional
Loại:  string|Element|Text optional
Nội dung sẽ hiển thị trong InfoWindow. Đó 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. Để thiết lập kích thước rõ ràng cho nội dung, hãy thiết lập 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 xoay bản đồ để màn hình InfoWindow hiển thị đầy đủ khi mở.
BetaheaderContent 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 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 tiêu đề, hãy đặt headerContent thành một phần tử HTML có kích thước đó.
BetaheaderDisabled 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, 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. 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 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 thiết lập 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 đượ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(), sau đó 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 đồ mà tại đó toạ độ địa lý của cửa sổ thông tin được neo vào. Nếu một InfoWindow được mở bằng một neo, thì pixelOffset sẽ được tính từ thuộc tính anchorPoint của liên kết đó.
position optional
Loại:  LatLng|LatLngLiteral optional
LatLng tại đó để hiển thị InfoWindow này. Nếu InfoWindow được mở bằng một neo, vị trí của neo sẽ được sử dụng.
zIndex optional
Loại:  number optional
Tất cả InfoWindows được hiển thị trên bản đồ theo thứ tự zIndex, các giá trị cao hơn hiển thị trước InfoWindows với các giá trị thấp hơn. Theo mặc định, InfoWindows hiển thị theo vĩ độ, trong khi InfoWindows có vĩ độ thấp hơn sẽ xuất hiện ở phía trước InfoWindows ở các vĩ độ cao hơn. InfoWindows luôn 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ở InfoWindow
anchor optional
Loại:  MVCObject|AdvancedMarkerElement optional
Điểm liên kết mà InfoWindow sẽ được định vị vào. Nếu liên kết khác rỗng, InfoWindow sẽ được đặt ở trên cùng chính giữa liên kết. InfoWindow sẽ hiển thị trên cùng bản đồ hoặc ảnh toàn cảnh như điểm neo (nếu có).
map optional
Loại:  Map|StreetViewPanorama optional
Bản đồ hoặc ảnh toàn cảnh mà trên đó để 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 nó được mở ra hay không. Khi bạn không đặt thuộc tính này hoặc khi thuộc tính này được đặt thành null hoặc undefined, hệ thống sẽ 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 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ả trong mọi trường hợp sử dụng.