Advanced Markers

Lớp AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

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.

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>
 
const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
AdvancedMarkerElement
AdvancedMarkerElement([options])
Tham số:
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.
anchorLeft
attr: anchor-left
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: anchor-left="string"
anchorTop
attr: anchor-top
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: anchor-top="string"
collisionBehavior
Loại: CollisionBehavior optional
Vui lòng xem AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable
attr: gmp-clickable
Loại: boolean optional
Vui lòng xem AdvancedMarkerElementOptions.gmpClickable.
Thuộc tính HTML: gmp-clickable
gmpDraggable
Loại: boolean optional
Vui lòng xem AdvancedMarkerElementOptions.gmpDraggable.
map
Loại: Map optional
Vui lòng xem AdvancedMarkerElementOptions.map.
position
attr: position
Vui lòng xem AdvancedMarkerElementOptions.position.
Thuộc tính HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
Loại: string
Vui lòng xem AdvancedMarkerElementOptions.title.
Thuộc tính HTML: title="string"
zIndex
Loại: number optional
Vui lòng xem AdvancedMarkerElementOptions.zIndex.
element
readonly
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
Loại: Node optional
Vui lòng xem AdvancedMarkerElementOptions.content.
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.
Được kế thừa: addEventListener, 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().
gmp-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. 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.
anchorLeft
không bắt buộc
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
không bắt buộc
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
không bắt buộc
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
không bắt buộc
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
không bắt buộc
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
không bắt buộc
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
không bắt buộc
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
không bắt buộc
Đặ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
không bắt buộc
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
không bắt buộc
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. Việc kết hợp các điểm đánh dấu có zIndex rõ ràng và các điểm đánh dấu không có có thể dẫn đến kết quả hình ảnh không mong muốn. Để đảm bảo hành vi có thể dự đoán, bạn nên đặt zIndex cho tất cả điểm đánh dấu hoặc không đặt. 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

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

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.

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

Lớp PinElement

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

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.

const {PinElement} = await google.maps.importLibrary("marker");
PinElement
PinElement([options])
Tham số:
background
Loại: string optional
Màu nền của hình dạng ghim. Vui lòng xem PinElementOptions.background.
borderColor
Loại: string optional
Màu đường viền của hình dạng ghim. Vui lòng xem PinElementOptions.borderColor.
glyphColor
Loại: string optional
Màu ký tự của ghim. Vui lòng xem PinElementOptions.glyphColor.
glyphSrc
Loại: URL|string optional
Nguồn của hình ảnh ký tự sẽ hiển thị trong ghim. Vui lòng xem PinElementOptions.glyphSrc.
glyphText
Loại: string optional
Văn bản xuất hiện trong ghim. Vui lòng xem PinElementOptions.glyphText.
scale
Loại: number optional
Vui lòng xem PinElementOptions.scale.
element
readonly
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
Loại: string|Element|URL optional
Vui lòng xem PinElementOptions.glyph.
Được kế thừa: addEventListener, removeEventListener

Giao diện PinElementOptions

google.maps.marker.PinElementOptions giao diện

Các lựa chọn để tạo PinElement.
background
không bắt buộc
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
không bắt buộc
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
không bắt buộc
Loại: string|Element|URL optional
Phần tử DOM hiển thị trong ghim.
glyphColor
không bắt buộc
Loại: string optional
Màu của ký tự. Hỗ trợ mọi giá trị màu CSS.
glyphSrc
không bắt buộc
Loại: URL|string optional
Nguồn của hình ảnh ký tự sẽ hiển thị trong ghim.
glyphText
không bắt buộc
Loại: string optional
Văn bản xuất hiện trong ghim.
scale
không bắt buộc
Loại: number optional
Mặc định: 1
Tỷ lệ của ghim.