Advanced Markers

AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement

在地图上显示位置。请注意,必须设置 position,才能显示 AdvancedMarkerElement

注意:将其用作 Web 组件(例如使用自定义 <gmp-advanced-marker> HTML 元素)的用法仅适用于 v=beta 渠道。

自定义元素:
<gmp-advanced-marker position="lat,lng" title="string"></gmp-advanced-marker>

此类扩展了 HTMLElement

此类实现了 AdvancedMarkerElementOptions

通过调用 const {AdvancedMarkerElement} = await google.maps.importLibrary("marker") 进行访问。请参阅 Maps JavaScript API 中的库

AdvancedMarkerElement
AdvancedMarkerElement([options])
参数: 
使用指定的选项创建 AdvancedMarkerElement。如果指定了地图,则系统会在构建时将 AdvancedMarkerElement 添加到地图中。
collisionBehavior
类型:  CollisionBehavior optional
content
类型:  Node optional
element
类型:  HTMLElement
此字段为只读字段。为视图提供后备的 DOM 元素。
BetagmpClickable
类型:  boolean optional
gmpDraggable
类型:  boolean optional
map
类型:  Map optional
position
HTML 属性
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
类型:  string
HTML 属性
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
类型:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject接收通知的对象。此参数必须是具有 handleEvent 方法的函数或对象
  • optionsboolean|AddEventListenerOptions optional请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,以便在有指定事件传送到目标时调用该函数。请参阅 addEventListener
addListener
addListener(eventName, handler)
参数: 
  • eventNamestring 观察到的事件。
  • handler:用于处理事件的 Function 函数。
返回值:  MapsEventListener 生成的事件监听器。
将指定的监听器函数添加到 Google 地图事件系统中的指定事件名称。
BetaremoveEventListener
removeEventListener(type, listener[, options])
参数: 
返回值:  void
从目标中移除之前使用 addEventListener 注册的事件监听器。请参阅 removeEventListener
click
function(event)
参数: 
当用户点击 AdvancedMarkerElement 元素时,系统会触发此事件。

不适用于 addEventListener()(请改用 gmp-click)。
drag
function(event)
参数: 
在用户拖动 AdvancedMarkerElement 时,此事件会反复触发。

不适用于 addEventListener()
dragend
function(event)
参数: 
当用户停止拖动 AdvancedMarkerElement 时,此事件会触发。

不适用于 addEventListener()
dragstart
function(event)
参数: 
当用户开始拖动 AdvancedMarkerElement 时,此事件会触发。

不适用于 addEventListener()
Betagmp-click
function(event)
参数: 
当用户点击 AdvancedMarkerElement 元素时,系统会触发此事件。最好与 addEventListener()(而非 addListener())搭配使用。

AdvancedMarkerElementOptions 接口

google.maps.marker.AdvancedMarkerElementOptions 接口

用于构建 AdvancedMarkerElement 的选项。

collisionBehavior optional
类型:  CollisionBehavior optional
一个枚举,用于指定 AdvancedMarkerElement 与其他 AdvancedMarkerElement 或矢量地图上的地图项标签发生冲突时的行为方式。

注意AdvancedMarkerElementAdvancedMarkerElement 之间的冲突适用于光栅地图和矢量地图,但 AdvancedMarkerElement 与基本地图的标签之间的冲突仅适用于矢量地图。

content optional
类型:  Node optional
默认值PinElement.element
AdvancedMarkerElement 的视觉效果提供后端支持的 DOM 元素。

注意AdvancedMarkerElement 不会克隆传入的 DOM 元素。将 DOM 元素传递给 AdvancedMarkerElement 后,将同一 DOM 元素传递给另一个 AdvancedMarkerElement 会移动 DOM 元素,并导致之前的 AdvancedMarkerElement 看起来是空的。

BetagmpClickable optional
类型:  boolean optional
默认值false
如果为 trueAdvancedMarkerElement 将可以点击,并会触发 gmp-click 事件,还可以进行互动以实现无障碍功能(例如,允许通过箭头键进行键盘导航)。
gmpDraggable optional
类型:  boolean optional
默认值false
如果为 true,则可以拖动 AdvancedMarkerElement

注意:包含海拔信息的 AdvancedMarkerElement 不可拖动。

map optional
类型:  Map optional
用于显示 AdvancedMarkerElement 的地图。地图必须显示 AdvancedMarkerElement,如果未在构建时提供,则可以通过设置 AdvancedMarkerElement.map 来提供。
position optional
设置 AdvancedMarkerElement 的位置。AdvancedMarkerElement 在构建时可以不指定位置,但在提供位置(例如,通过用户的操作或选择)之前不会显示。如果未在构建时提供 AdvancedMarkerElement 的位置,则可以通过设置 AdvancedMarkerElement.position 来提供。

注意:只有矢量地图支持包含海拔信息的 AdvancedMarkerElement

title optional
类型:  string optional
鼠标悬停时显示的文本。如果提供,系统会将无障碍文本(例如用于屏幕阅读器)添加到 AdvancedMarkerElement 并提供相应值。
zIndex optional
类型:  number optional
所有 AdvancedMarkerElement 都会按照 zIndex 的顺序显示在地图上,值越高,显示位置就越靠前。AdvancedMarkerElement默认情况下,AdvancedMarkerElement 会根据其在屏幕上的垂直位置进行显示,位于屏幕下方的 AdvancedMarkerElement 会显示在位于屏幕上方的 AdvancedMarkerElement 前面。请注意,zIndex 还可用于确定 CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY 高级标记之间的相对优先级。zIndex 值越高,表示优先级越高。

AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent

此事件是通过点击高级标记创建的。使用 event.target.position 访问标记的位置。

此类扩展了 Event

通过调用 const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker") 进行访问。请参阅 Maps JavaScript API 中的库

PinElement

google.maps.marker.PinElement

PinElement 表示由形状和字形组成的 DOM 元素。该形状与默认 AdvancedMarkerElement 中的气球样式相同。图标是一种可选的 DOM 元素,以气泡形状显示。PinElement 的宽高比可能会因其 PinElement.scale 而异。

注意:尚不支持将其用作 Web 组件(例如,将其用作 HTMLElement 子类或通过 HTML 使用)。

此类扩展了 HTMLElement

此类实现了 PinElementOptions

通过调用 const {PinElement} = await google.maps.importLibrary("marker") 进行访问。请参阅 Maps JavaScript API 中的库

PinElement
PinElement([options])
参数: 
background
类型:  string optional
borderColor
类型:  string optional
element
类型:  HTMLElement
此字段为只读字段。为视图提供后备的 DOM 元素。
glyph
类型:  string|Element|URL optional
glyphColor
类型:  string optional
scale
类型:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
参数: 
返回值:  void
此功能尚无法使用。
BetaremoveEventListener
removeEventListener(type, listener[, options])
参数: 
返回值:  void
从目标中移除之前使用 addEventListener 注册的事件监听器。请参阅 removeEventListener

PinElementOptions 接口

google.maps.marker.PinElementOptions 接口

用于创建 PinElement 的选项。

background optional
类型:  string optional
图钉形状的背景颜色。支持任何 CSS 颜色值
borderColor optional
类型:  string optional
图钉形状的边框颜色。支持任何 CSS 颜色值
glyph optional
类型:  string|Element|URL optional
在固定的标签页中显示的 DOM 元素。
glyphColor optional
类型:  string optional
字形的颜色。支持任何 CSS 颜色值
scale optional
类型:  number optional
默认值1
图钉的缩放比例。