Advanced Markers

Lớp AdvancedMarkerElement

Lớp google.maps.marker.AdvancedMarkerElement

Cho biết một vị trí trên bản đồ. Xin lưu ý rằng bạn phải đặt position để AdvancedMarkerElement xuất hiện.

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

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

Lớp này 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 JavaScript của Maps.

Hàm dựng
AdvancedMarkerElement	AdvancedMarkerElement([options]) Tham số:  options:  AdvancedMarkerElementOptions optional Tạo AdvancedMarkerElement với các tuỳ chọn được chỉ định. Nếu bạn chỉ định một bản đồ, thì AdvancedMarkerElement sẽ được thêm vào bản đồ đó khi tạo.

Thuộc tính
anchorLeft	Loại:  string optional Mặc định: "-50%" Giá trị tỷ lệ phần trăm chiều dài CSS được dùng để bù trừ điểm neo của điểm đánh dấu từ góc trên cùng bên trái của điểm đánh dấu. Điều này rất hữu ích khi sử dụng hình ảnh có điểm neo khác với điểm giữa dưới cùng thông thường của điểm đánh dấu mặc định. Thuộc tính HTML: <gmp-advanced-marker anchor-left="string"></gmp-advanced-marker>
anchorTop	Loại:  string optional Mặc định: "-100%" Giá trị tỷ lệ phần trăm chiều dài CSS được dùng để bù trừ điểm neo của điểm đánh dấu từ góc trên cùng bên trái của điểm đánh dấu. Điều này rất hữu ích khi sử dụng hình ảnh có điểm neo khác với điểm giữa dưới cùng thông thường của điểm đánh dấu mặc định. Thuộc tính HTML: <gmp-advanced-marker anchor-top="string"></gmp-advanced-marker>
collisionBehavior	Loại:  CollisionBehavior optional Vui lòng xem AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable	Loại:  boolean optional Vui lòng xem AdvancedMarkerElementOptions.gmpClickable. Thuộc tính HTML: <gmp-advanced-marker gmp-clickable></gmp-advanced-marker>
gmpDraggable	Loại:  boolean optional Vui lòng xem AdvancedMarkerElementOptions.gmpDraggable.
map	Loại:  Map optional Vui lòng xem AdvancedMarkerElementOptions.map.
position	Loại:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Vui lòng xem AdvancedMarkerElementOptions.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 Vui lòng xem AdvancedMarkerElementOptions.title. Thuộc tính HTML: <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex	Loại:  number optional Vui lòng xem AdvancedMarkerElementOptions.zIndex.
element	Không dùng nữa: Sử dụng trực tiếp AdvancedMarkerElement. Loại:  HTMLElement Trường này chỉ có thể đọc. Phần tử DOM hỗ trợ thành phần hiển thị.
content	Không dùng nữa: Thay vào đó, hãy sử dụng .children. Loại:  Node optional Vui lòng xem AdvancedMarkerElementOptions.content.

Phương thức
addEventListener	addEventListener(type, listener[, options]) Tham số:  type:  string Chuỗi phân biệt chữ hoa chữ thường đại diện cho loại sự kiện cần theo dõi. listener:  EventListener|EventListenerObject Đối tượng nhận thông báo. Đây phải là một hàm hoặc một đối tượng có phương thức handleEvent options:  boolean|AddEventListenerOptions optional Xem các lựa chọn. Sự kiện tuỳ chỉnh chỉ hỗ trợ capture và passive. 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 được chỉ định được phân phối đến mục tiêu. Xem addEventListener
addListener	addListener(eventName, handler) Tham số:  eventName:  string Sự kiện được ghi nhận. handler:  Function 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 của Maps.
removeEventListener	removeEventListener(type, listener[, options]) Tham số:  type:  string Chuỗi chỉ định loại sự kiện cần xoá trình nghe sự kiện. listener:  EventListener|EventListenerObject Trình nghe sự kiện của trình xử lý sự kiện cần xoá khỏi mục tiêu sự kiện. options:  boolean|EventListenerOptions optional Xem các lựa chọn. 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.

Sự kiện
click	function(event) Đối số:  event:  MapMouseEvent 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ố:  event:  MapMouseEvent 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ố:  event:  MapMouseEvent 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ố:  event:  MapMouseEvent 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().
gmp-click	function(event) Đối số:  event:  AdvancedMarkerClickEvent Sự kiện này được kích hoạt khi người dùng nhấp vào phần tử AdvancedMarkerElement. Tốt nhất nên dùng với addEventListener() (thay vì addListener()).

Giao diện AdvancedMarkerElementOptions

google.maps.marker.AdvancedMarkerElementOptions giao diện

Các lựa chọn để tạo AdvancedMarkerElement.

Thuộc tính
anchorLeft optional	Loại:  string optional Mặc định: "-50%" Giá trị tỷ lệ phần trăm chiều dài CSS được dùng để bù trừ điểm neo của điểm đánh dấu từ góc trên cùng bên trái của điểm đánh dấu. Điều này rất hữu ích khi sử dụng hình ảnh có điểm neo khác với điểm giữa dưới cùng thông thường của điểm đánh dấu mặc định.
anchorTop optional	Loại:  string optional Mặc định: "-100%" Giá trị tỷ lệ phần trăm chiều dài CSS được dùng để bù trừ điểm neo của điểm đánh dấu từ góc trên cùng bên trái của điểm đánh dấu. Điều này rất hữu ích khi sử dụng hình ảnh có điểm neo khác với điểm giữa dưới cùng thông thường của điểm đánh dấu mặc định.
collisionBehavior optional	Loại:  CollisionBehavior optional Một kiểu liệt kê chỉ định cách AdvancedMarkerElement sẽ hoạt động khi xung đột với một AdvancedMarkerElement khác hoặc với nhãn bản đồ cơ sở trên bản đồ vectơ. Lưu ý: Sự xung đột giữa AdvancedMarkerElement và AdvancedMarkerElement xảy ra trên cả bản đồ đường quét và bản đồ vectơ, tuy nhiên, sự xung đột giữa AdvancedMarkerElement và nhãn của bản đồ cơ sở chỉ xảy ra trên bản đồ vectơ.
content optional	Loại:  Node optional Mặc định: PinElement Phần tử DOM hỗ trợ hình ảnh của AdvancedMarkerElement. Lưu ý: AdvancedMarkerElement không sao chép phần tử DOM được truyền vào. Sau khi phần tử DOM được truyền đến một AdvancedMarkerElement, việc truyền cùng một phần tử DOM đến một AdvancedMarkerElement khác sẽ di chuyển phần tử DOM và khiến AdvancedMarkerElement trước đó có vẻ trống.
gmpClickable optional	Loại:  boolean optional Mặc định: false Nếu true, AdvancedMarkerElement sẽ có thể nhấp được và kích hoạt sự kiện gmp-click, đồng thời sẽ có tính tương tác cho 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 true, bạn có thể kéo AdvancedMarkerElement. Lưu ý: Bạn không thể kéo AdvancedMarkerElement có độ cao.
map optional	Loại:  Map optional Bản đồ để hiển thị AdvancedMarkerElement. Bản đồ là bắt buộc để 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 thời điểm xây dựng.
position optional	Loại:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Đặt vị trí của AdvancedMarkerElement. Bạn có thể tạo AdvancedMarkerElement mà không cần vị trí, nhưng sẽ không xuất hiện cho đến khi bạn cung cấp vị trí, chẳng hạn như thông qua 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 cung cấp tại thời điểm tạo. 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ị được cung cấp.
zIndex optional	Loại:  number optional Tất cả AdvancedMarkerElement đề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 AdvancedMarkerElement có giá trị thấp hơn. Theo mặc định, AdvancedMarkerElement được hiển thị theo vị trí thẳng đứng trên màn hình, trong đó AdvancedMarkerElement thấp hơn sẽ xuất hiện trước AdvancedMarkerElement cao hơn trên màn hình. Xin lưu ý rằng zIndex cũng được dùng để giúp xác định mức độ ưu tiên tương đối giữa các Đ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.

Lớp AdvancedMarkerClickEvent

Lớp google.maps.marker.AdvancedMarkerClickEvent

Sự kiện này được tạo khi người dùng nhấp vào một Đ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 JavaScript của Maps.

Lớp PinElement

Lớp google.maps.marker.PinElement

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

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

Lớp này 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 JavaScript của Maps.

Hàm dựng
PinElement	PinElement([options]) Tham số:  options:  PinElementOptions optional

Thuộc tính
background	Loại:  string optional Vui lòng xem PinElementOptions.background.
borderColor	Loại:  string optional Vui lòng xem PinElementOptions.borderColor.
glyphColor	Loại:  string optional Vui lòng xem PinElementOptions.glyphColor.
glyphSrc	Loại:  URL|string optional Vui lòng xem PinElementOptions.glyphSrc.
glyphText	Loại:  string optional Vui lòng xem PinElementOptions.glyphText.
scale	Loại:  number optional Vui lòng xem PinElementOptions.scale.
element	Không dùng nữa: Sử dụng trực tiếp PinElement. Loại:  HTMLElement Trường này chỉ có thể đọc. Phần tử DOM hỗ trợ thành phần hiển thị.
glyph	Không dùng nữa: Thay vào đó, hãy sử dụng PinElementOptions.glyphText hoặc PinElementOptions.glyphSrc. Loại:  string|Element|URL optional Vui lòng xem PinElementOptions.glyph.

Phương thức
addEventListener	addEventListener(type, listener[, options]) Tham số:  type:  string Chuỗi phân biệt chữ hoa chữ thường đại diện cho loại sự kiện cần theo dõi. listener:  EventListener|EventListenerObject Đối tượng nhận thông báo. Đây phải là một hàm hoặc một đối tượng có phương thức handleEvent options:  boolean|AddEventListenerOptions optional Xem các lựa chọn. Sự kiện tuỳ chỉnh chỉ hỗ trợ capture và passive. 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 được chỉ định được phân phối đến mục tiêu. Xem addEventListener.
removeEventListener	removeEventListener(type, listener[, options]) Tham số:  type:  string Chuỗi chỉ định loại sự kiện cần xoá trình nghe sự kiện. listener:  EventListener|EventListenerObject Trình nghe sự kiện của trình xử lý sự kiện cần xoá khỏi mục tiêu sự kiện. options:  boolean|EventListenerOptions optional Xem các lựa chọn. 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

google.maps.marker.PinElementOptions giao diện

Các lựa chọn để tạo PinElement.

Thuộc tính
background optional	Loại:  string optional Màu nền của hình dạng 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 dạng ghim. Hỗ trợ mọi giá trị màu CSS.
glyph optional	Không dùng nữa: Thay vào đó, hãy sử dụng PinElementOptions.glyphText hoặc PinElementOptions.glyphSrc. 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.
glyphSrc optional	Loại:  URL|string optional Nguồn của hình ảnh ký tự sẽ hiển thị trong ghim.
glyphText optional	Loại:  string optional Văn bản xuất hiện trong ghim.
scale optional	Loại:  number optional Mặc định: 1 Tỷ lệ của ghim.