Advanced Markers

AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement

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

自定义元素:
<gmp-advanced-marker gmp-clickable 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
gmpClickable
类型:  boolean optional
HTML 属性
  • <gmp-advanced-marker gmp-clickable></gmp-advanced-marker>
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
element
类型:  HTMLElement
此字段为只读字段。支持视图的 DOM 元素。
content
类型:  Node optional
addEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
addListener
addListener(eventName, handler)
参数: 
  • eventNamestring观测到的事件。
  • handlerFunction 用于处理事件的函数。
返回值:生成的事件监听器。MapsEventListener
在 Maps Eventing 系统中,将指定的监听器函数添加到指定的事件名称。
removeEventListener
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 会显示在位置较高的 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
此功能尚无法使用。
removeEventListener
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
图钉的缩放比例。