Advanced Markers

Lớp AdvancedMarkerElement

Lớp google.maps.marker.AdvancedMarkerElement

Hiển thị một vị trí trên bản đồ. Lưu ý rằng bạn phải đặt position để AdvancedMarkerElement hiển thị.

Lưu ý: Sử dụng như một Thành phần web (ví dụ: sử dụng phần tử HTML <gmp-advanced-marker> tuỳ chỉnh chỉ có trong kênh v=beta).

Phần tử tuỳ chỉnh:
<gmp-advanced-marker position="lat,lng" title="string"></gmp-advanced-marker>

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

Lớp này sẽ triển khai AdvancedMarkerElementOptions.

Truy cập bằng cách gọi const {AdvancedMarkerElement} = await google.maps.importLibrary("marker"). Xem Thư viện trong API Maps JavaScript.

AdvancedMarkerElement
AdvancedMarkerElement([options])
Tham số: 
Tạo một AdvancedMarkerElement với các tuỳ chọn được chỉ định. Nếu bản đồ được chỉ định, AdvancedMarkerElement sẽ được thêm vào bản đồ trong quá trình xây dựng.
collisionBehavior
Loại:  CollisionBehavior optional
content
Loại:  Node optional
element
Loại:  HTMLElement
Trường này chỉ để đọc. Phần tử DOM đang hỗ trợ chế độ xem.
BetagmpClickable
Loại:  boolean optional
gmpDraggable
Loại:  boolean optional
map
Loại:  Map optional
position
Thuộc tính HTML:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
Loại:  string
Thuộc tính HTML:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
Loại:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
Tham số: 
  • typestring Một chuỗi phân biệt chữ hoa chữ thường biểu thị loại sự kiện cần theo dõi.
  • listenerEventListener|EventListenerObject Đối tượng nhận thông báo. Đây phải là một hàm hoặc đối tượng có phương thức handleEvent
  • optionsboolean|AddEventListenerOptions optional Xem các lựa chọn. Sự kiện tuỳ chỉnh chỉ hỗ trợ capturepassive.
Giá trị trả về:  void
Thiết lập một hàm sẽ được gọi bất cứ khi nào sự kiện đã chỉ định được phân phối đến mục tiêu. Xem addEventListener
addListener
addListener(eventName, handler)
Tham số: 
  • eventNamestring Sự kiện quan sát được.
  • handlerFunction Hàm xử lý sự kiện.
Giá trị trả về:  MapsEventListener Trình nghe sự kiện kết quả.
Thêm hàm trình nghe đã cho vào tên sự kiện đã cho trong hệ thống Sự kiện Maps.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Tham số: 
Giá trị trả về:  void
Xoá trình nghe sự kiện đã đăng ký trước đó bằng addEventListener khỏi mục tiêu. Xem removeEventListener
click
function(event)
Đối số: 
Sự kiện này được kích hoạt khi người dùng nhấp vào phần tử AdvancedMarkerElement.

Không dùng được với addEventListener() (hãy dùng gmp-click).
drag
function(event)
Đối số: 
Sự kiện này được kích hoạt liên tục trong khi người dùng kéo AdvancedMarkerElement.

Không dùng được với addEventListener().
dragend
function(event)
Đối số: 
Sự kiện này được kích hoạt khi người dùng ngừng kéo AdvancedMarkerElement.

Không dùng được với addEventListener().
dragstart
function(event)
Đối số: 
Sự kiện này được kích hoạt khi người dùng bắt đầu kéo AdvancedMarkerElement.

Không dùng được với addEventListener().
Betagmp-click
function(event)
Đối số: 
Sự kiện này được kích hoạt khi người dùng nhấp vào phần tử AdvancedMarkerElement. Nên dùng với addEventListener() (thay vì addListener()).

Giao diện AdvancedMarkerElementOptions

Giao diện google.maps.marker.AdvancedMarkerElementOptions

Các tuỳ chọn để tạo AdvancedMarkerElement.

collisionBehavior optional
Loại:  CollisionBehavior optional
Một bảng liệt kê chỉ định cách AdvancedMarkerElement hoạt động khi va chạm với AdvancedMarkerElement khác hoặc với nhãn bản đồ cơ sở trên bản đồ vectơ.

Lưu ý: Xung đột AdvancedMarkerElement đến AdvancedMarkerElement hoạt động trên cả bản đồ đường quét và bản đồ vectơ, tuy nhiên, xung đột nhãn AdvancedMarkerElement với bản đồ cơ sở chỉ hoạt động trên bản đồ vectơ.

content optional
Loại:  Node optional
Mặc định: PinElement.element
Phần tử DOM hỗ trợ hình ảnh của AdvancedMarkerElement.

Lưu ý: AdvancedMarkerElement không sao chép phần tử DOM đã truyền vào. Sau khi phần tử DOM được truyền vào AdvancedMarkerElement, việc chuyển cùng một phần tử DOM sang AdvancedMarkerElement khác sẽ di chuyển phần tử DOM và khiến AdvancedMarkerElement trước đó trở nên trống.

BetagmpClickable optional
Loại:  boolean optional
Mặc định: false
Nếu true, AdvancedMarkerElement sẽ có thể nhấp vào và kích hoạt sự kiện gmp-click, đồng thời có khả năng tương tác đối với các mục đích hỗ trợ tiếp cận (ví dụ: cho phép di chuyển bằng bàn phím thông qua các phím mũi tên).
gmpDraggable optional
Loại:  boolean optional
Mặc định: false
Nếu là true, bạn có thể kéo AdvancedMarkerElement.

Lưu ý: Không thể kéo AdvancedMarkerElement với độ cao.

map optional
Loại:  Map optional
Bản đồ nơi hiển thị AdvancedMarkerElement. Bản đồ phải hiển thị AdvancedMarkerElement và có thể được cung cấp bằng cách đặt AdvancedMarkerElement.map nếu không được cung cấp tại công trình xây dựng.
position optional
Thiết lập vị trí của AdvancedMarkerElement. AdvancedMarkerElement có thể được tạo mà không có vị trí, nhưng sẽ không hiển thị cho đến khi vị trí đó được cung cấp – ví dụ: bằng hành động hoặc lựa chọn của người dùng. Bạn có thể cung cấp vị trí của AdvancedMarkerElement bằng cách đặt AdvancedMarkerElement.position nếu không được cung cấp tại quá trình xây dựng.

Lưu ý: AdvancedMarkerElement có độ cao chỉ được hỗ trợ trên bản đồ vectơ.

title optional
Loại:  string optional
Văn bản di chuột qua. Nếu được cung cấp, văn bản hỗ trợ tiếp cận (ví dụ: để sử dụng với trình đọc màn hình) sẽ được thêm vào AdvancedMarkerElement cùng với giá trị đã cung cấp.
zIndex optional
Loại:  number optional
Mọi AdvancedMarkerElement đều xuất hiện trên bản đồ theo thứ tự zIndex, trong đó giá trị cao hơn sẽ xuất hiện trước AdvancedMarkerElement có giá trị thấp hơn. Theo mặc định, AdvancedMarkerElement hiển thị theo vị trí dọc trên màn hình, trong đó AdvancedMarkerElement thấp hơn xuất hiện phía trước AdvancedMarkerElement xa hơn màn hình. Lưu ý rằng zIndex cũng được dùng để xác định mức độ ưu tiên tương đối giữa Điểm đánh dấu nâng cao CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY. Giá trị zIndex càng cao thì mức độ ưu tiên càng cao.

AdvancedMarkerClickEvent

Lớp google.maps.marker.AdvancedMarkerClickEvent

Sự kiện này được tạo bằng cách nhấp vào Điểm đánh dấu nâng cao. Truy cập vào vị trí của điểm đánh dấu bằng event.target.position.

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

Truy cập bằng cách gọi const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker"). Xem Thư viện trong API Maps JavaScript.

Lớp PinElement

Lớp google.maps.marker.PinElement

PinElement đại diện cho phần tử DOM bao gồm hình dạng và ký tự. Hình dạng này có cùng kiểu bong bóng như trong AdvancedMarkerElement mặc định. Ký tự là một phần tử DOM tùy chọn được hiển thị trong hình bóng. PinElement có thể có tỷ lệ khung hình khác nhau tuỳ thuộc vào PinElement.scale.

Lưu ý: Chưa hỗ trợ việc sử dụng dưới dạng Thành phần web (ví dụ: sử dụng làm lớp con HTMLElement hoặc thông qua HTML).

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

Lớp này sẽ triển khai PinElementOptions.

Truy cập bằng cách gọi const {PinElement} = await google.maps.importLibrary("marker"). Xem Thư viện trong API Maps JavaScript.

PinElement
PinElement([options])
Tham số: 
background
Loại:  string optional
borderColor
Loại:  string optional
element
Loại:  HTMLElement
Trường này chỉ để đọc. Phần tử DOM đang hỗ trợ chế độ xem.
glyph
Loại:  string|Element|URL optional
glyphColor
Loại:  string optional
scale
Loại:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
Tham số: 
Giá trị trả về:  void
Chưa có chức năng này để sử dụng.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Tham số: 
Giá trị trả về:  void
Xoá trình nghe sự kiện đã đăng ký trước đó bằng addEventListener khỏi mục tiêu. Xem removeEventListener

Giao diện PinElementOptions

Giao diện google.maps.marker.PinElementOptions

Các tuỳ chọn để tạo PinElement.

background optional
Loại:  string optional
Màu nền của hình ghim. Hỗ trợ mọi giá trị màu CSS.
borderColor optional
Loại:  string optional
Màu đường viền của hình ghim. Hỗ trợ mọi giá trị màu CSS.
glyph optional
Loại:  string|Element|URL optional
Phần tử DOM hiển thị trong ghim.
glyphColor optional
Loại:  string optional
Màu của ký tự. Hỗ trợ mọi giá trị màu CSS.
scale optional
Loại:  number optional
Mặc định: 1
Tỷ lệ của ghim.