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 元素。
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 接收通知的对象。此值必须是函数或具有句柄事件方法的对象
  • optionsboolean|AddEventListenerOptions optional查看选项。自定义事件仅支持 capturepassive
返回值void
用于设置会在指定事件传递到目标时调用的函数。请参阅 addEventListener
addListener
addListener(eventName, handler)
参数
  • eventNamestring观察到的事件。
  • handler:用于处理事件的 Function 函数。
返回值MapsEventListener 生成的事件监听器。
将给定的监听器函数添加到 Maps Eventing 系统中的指定事件名称。
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
支持 AdvancedMarkerElement 视觉元素的 DOM 元素。

注意AdvancedMarkerElement 不会克隆传入的 DOM 元素。将 DOM 元素传递给 AdvancedMarkerElement 后,将同一 DOM 元素传递给另一个 AdvancedMarkerElement 会移动 DOM 元素,并使上一个 AdvancedMarkerElement 看起来为空。

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
图钉的缩放比例。