Info Window

Lớp InfoWindow

google.maps.InfoWindow class
extends MVCObject
library "maps", "streetView"

Một 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.

const {InfoWindow} = await google.maps.importLibrary("maps");

hoặc

const {InfoWindow} = await google.maps.importLibrary("streetView");

Hàm dựng

InfoWindow

InfoWindow([opts]) Tham số: opts: InfoWindowOptions optional Tạo một cửa sổ thông tin với các tuỳ 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 điểm đánh dấu, tuỳ thuộc vào nội dung được chỉ định trong các tuỳ chọn. Trừ phi bạn tắt tính năng tự động kéo, InfoWindow sẽ kéo bản đồ để hiển thị khi được mở. Sau khi tạo InfoWindow, bạn phải gọi open để hiển thị cửa sổ đó trên bản đồ. Người dùng có thể nhấp vào nút đóng trên InfoWindow để xoá cửa sổ này khỏi bản đồ hoặc nhà phát triển có thể gọi close() để có hiệu ứng tương tự.

Thuộc tính
isOpen readonly	Loại: boolean Kiểm tra xem InfoWindow có đang mở hay không.

Phương thức
close	close() Tham số: Không có Giá trị trả về: Không có Đóng InfoWindow này bằng cách xoá 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 vào đó. Không thể lấy tiêu điểm vào 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 như nội dung đã đặ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. Xem InfoWindowOptions.headerContent.
getHeaderDisabled	getHeaderDisabled() Tham số: Không có Giá trị trả về: boolean|undefined Cho biết toàn bộ hàng tiêu đề có bị tắt hay không. 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 neo mà InfoWindow này sẽ được đặt vào. Nếu điểm neo không rỗng, thì InfoWindow sẽ được đặt ở chính giữa phía trên của điểm neo. InfoWindow sẽ được hiển thị trên cùng một bản đồ hoặc ảnh toàn cảnh dưới dạng 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 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, điểm neo có thể là bất kỳ MVCObject nào hiển thị thuộc tính LatLng position và thuộc tính Point anchorPoint (không bắt buộc) để 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 việc 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 sẽ được hiển thị trong InfoWindow này. Giá trị trả về: Không có
setHeaderContent	setHeaderContent([headerContent]) Tham số: headerContent: string|Element|Text optional Nội dung tiêu đề sẽ được InfoWindow này hiển thị. Xem InfoWindowOptions.headerContent. Giá trị trả về: Không có
setHeaderDisabled	setHeaderDisabled([headerDisabled]) Tham số: headerDisabled: boolean optional Chỉ định xem có tắt toàn bộ hàng tiêu đề hay không. Xem InfoWindowOptions.headerDisabled. Giá trị trả về: Không có
setOptions	setOptions([options]) Tham số: options: InfoWindowOptions optional 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. Cửa sổ thông tin có chỉ mục z lớn hơn sẽ xuất hiện trước tất cả các cửa sổ thông tin khác có chỉ mục z thấp hơn. Giá trị trả về: Không có
Được kế thừa: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

Sự kiện
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ụ: điều này có thể là do gọi phương thức InfoWindow.close, nhấn phím Escape để đóng InfoWindow, 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ị đầy đủ. Sự kiện này không được kích hoạt khi InfoWindow được kéo 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

google.maps.InfoWindowOptions giao diện

Đối tượng InfoWindowOptions dùng để xác định các thuộc tính có thể đặt trên InfoWindow.

Thuộc tính
ariaLabel không bắt buộc	Loại: string optional AriaLabel để chỉ định cho InfoWindow.
content không bắt buộc	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 là một phần tử HTML có kích thước đó.
disableAutoPan không bắt buộc	Loại: boolean optional Mặc định: false Tắt tính năng kéo bản đồ để hiển thị đầy đủ InfoWindow khi mở.
headerContent không bắt buộc	Loại: string|Element|Text optional Nội dung sẽ hiển thị trong hàng tiêu đề của InfoWindow. Đây có thể là một phần tử HTML hoặc một chuỗi văn bản thuần túy. 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 không bắt buộc	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 bị ẩn.
maxWidth không bắt buộc	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 gọi open().
minWidth không bắt buộc	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 đượ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 không bắt buộc	Loại: Size optional Độ lệch (tính bằng pixel) của đỉnh cửa sổ thông tin so với đ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 điểm neo, thì pixelOffset sẽ được tính từ thuộc tính anchorPoint của điểm neo.
position không bắt buộc	Loại: LatLng|LatLngLiteral optional LatLng để hiển thị InfoWindow này. Nếu InfoWindow được mở bằng một điểm neo, thì vị trí của điểm neo sẽ được sử dụng.
zIndex không bắt buộc	Loại: number optional Tất cả InfoWindow đều hiển thị trên bản đồ theo thứ tự zIndex, trong đó các giá trị cao hơn sẽ hiển thị trước InfoWindow có giá trị thấp hơn. Theo mặc định, InfoWindows được hiển thị theo vĩ độ, trong đó InfoWindows có vĩ độ thấp hơn sẽ xuất hiện trước InfoWindows có vĩ độ cao hơn. InfoWindows luôn xuất hiện trước điểm đánh dấu.

Giao diện InfoWindowOpenOptions

google.maps.InfoWindowOpenOptions giao diện

Các lựa chọn để mở InfoWindow

Thuộc tính
anchor không bắt buộc	Loại: MVCObject|AdvancedMarkerElement optional Điểm neo mà InfoWindow này sẽ được đặt vị trí. Nếu điểm neo không rỗng, thì InfoWindow sẽ được đặt ở giữa trên cùng của điểm neo. InfoWindow sẽ được hiển thị trên cùng một bản đồ hoặc ảnh toàn cảnh dưới dạng điểm neo (nếu có).
map không bắt buộc	Loại: Map|StreetViewPanorama optional Bản đồ hoặc ảnh toàn cảnh để hiển thị InfoWindow này.
shouldFocus không bắt buộc	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 được mở hay không. Khi thuộc tính này không được đặt hoặc khi được đặt 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 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.