Advanced Markers

AdvancedMarkerElement 类

google.maps.marker.AdvancedMarkerElement 类

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

自定义元素:
<gmp-advanced-marker anchor-left="string" anchor-top="string" 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 会在构建时添加到地图中。
anchorLeft
类型:string optional
默认值:“-50%”
CSS 长度百分比值,用于使标记的锚点相对于标记的左上角偏移。如果使用的视觉效果具有不同于默认标记的典型底部中心点的锚点,此功能会非常有用。
HTML 属性:
  • <gmp-advanced-marker anchor-left="string"></gmp-advanced-marker>
anchorTop
类型:string optional
默认值:“-100%”
CSS 长度百分比值,用于使标记的锚点相对于标记的左上角偏移。如果使用的视觉效果具有不同于默认标记的典型底部中心点的锚点,此功能会非常有用。
HTML 属性:
  • <gmp-advanced-marker anchor-top="string"></gmp-advanced-marker>
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])
参数:
  • type:string一个区分大小写的字符串,表示要监听的事件类型。
  • listener:EventListener|EventListenerObject 接收通知的对象。这必须是函数或具有 handleEvent 方法的对象
  • options:boolean|AddEventListenerOptions optional请参阅选项。自定义事件仅支持 capture 和 passive。
返回值:void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
addListener
addListener(eventName, handler)
参数:
  • eventName:string监测到的事件。
  • handler:用于处理事件的 Function 函数。
返回值:  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()。
gmp-click
function(event)
参数: 
当用户点击 AdvancedMarkerElement 元素时,系统会触发此事件。最好与 addEventListener()(而非 addListener())搭配使用。

AdvancedMarkerElementOptions 接口

google.maps.marker.AdvancedMarkerElementOptions 接口

用于构建 AdvancedMarkerElement 的选项。

anchorLeft optional
类型:string optional
默认值:“-50%”
CSS 长度百分比值,用于使标记的锚点相对于标记的左上角偏移。如果使用的视觉效果具有不同于默认标记的典型底部中心点的锚点,此功能会非常有用。
anchorTop optional
类型:string optional
默认值:“-100%”
CSS 长度百分比值,用于使标记的锚点相对于标记的左上角偏移。如果使用的视觉效果具有不同于默认标记的典型底部中心点的锚点,此功能会非常有用。
collisionBehavior optional
类型:CollisionBehavior optional
一个枚举,用于指定 AdvancedMarkerElement 与另一个 AdvancedMarkerElement 或矢量地图上的基本地图标签发生冲突时的行为方式。

注意:AdvancedMarkerElement 与 AdvancedMarkerElement 之间的冲突在光栅地图和矢量地图上均可检测到,但 AdvancedMarkerElement 与基本地图标签之间的冲突只能在矢量地图上检测到。

content optional
类型:Node optional
默认值:PinElement
支持 AdvancedMarkerElement 视觉效果的 DOM 元素。

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

gmpClickable optional
类型:boolean optional
默认值:false
如果为 true,AdvancedMarkerElement 将可以点击,并会触发 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 或 Marker3DElement 相同的气球样式。字形是显示在气球形状中的可选 DOM 元素。PinElement 的宽高比可能会因其 PinElement.scale 而异。

此类扩展了 HTMLElement。

此类实现 PinElementOptions。

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

PinElement
PinElement([options])
参数:
background
类型:string optional
borderColor
类型:string optional
glyphColor
类型:string optional
glyphSrc
类型:URL|string optional
glyphText
类型:string optional
scale
类型:number optional
element
类型:HTMLElement
此字段为只读字段。支持视图的 DOM 元素。
glyph
类型:string|Element|URL optional
addEventListener
addEventListener(type, listener[, options])
参数:
  • type:string一个区分大小写的字符串,表示要监听的事件类型。
  • listener:EventListener|EventListenerObject 接收通知的对象。这必须是函数或具有 handleEvent 方法的对象
  • options:boolean|AddEventListenerOptions optional请参阅选项。自定义事件仅支持 capture 和 passive。
返回值:void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener。
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 颜色值。
glyphSrc optional
类型:URL|string optional
要在图钉中显示的字形图片的来源。
glyphText optional
类型:string optional
图钉中显示的文本。
scale optional
类型:number optional
默认值:1
图钉的缩放比例。