Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

Advanced Markers

AdvancedMarkerElement 类

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

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

<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])` 参数： `options: AdvancedMarkerElementOptions optional` 使用指定的选项创建 `AdvancedMarkerElement`。如果指定了地图，则 `AdvancedMarkerElement` 会在构建时添加到地图中。

属性
`anchorLeft` attr: anchor-left	类型：`string optional` 默认值：“-50%” CSS 长度百分比值，用于使标记的锚点相对于标记的左上角偏移。如果使用的视觉效果具有不同于默认标记的典型底部中心点的锚点，此功能会非常有用。 HTML 属性： `anchor-left="string"`
`anchorTop` attr: anchor-top	类型：`string optional` 默认值：“-100%” CSS 长度百分比值，用于使标记的锚点相对于标记的左上角偏移。如果使用的视觉效果具有不同于默认标记的典型底部中心点的锚点，此功能会非常有用。 HTML 属性： `anchor-top="string"`
`collisionBehavior`	类型：`CollisionBehavior optional` 请参阅 `AdvancedMarkerElementOptions.collisionBehavior`。
`gmpClickable` attr: gmp-clickable	类型：`boolean optional` 请参阅 `AdvancedMarkerElementOptions.gmpClickable`。 HTML 属性： `gmp-clickable`
`gmpDraggable`	类型：`boolean optional` 请参阅 `AdvancedMarkerElementOptions.gmpDraggable`。
`map`	类型：`Map optional` 请参阅 `AdvancedMarkerElementOptions.map`。
`position` attr: position	类型：`LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` 请参阅 `AdvancedMarkerElementOptions.position`。 HTML 属性： `position="lat,lng"` `position="lat,lng,altitude"`
`title` attr: title	类型：`string` 请参阅 `AdvancedMarkerElementOptions.title`。 HTML 属性： `title="string"`
`zIndex`	类型：`number optional` 请参阅 `AdvancedMarkerElementOptions.zIndex`。
`element` readonly	已弃用：请直接使用 AdvancedMarkerElement。类型：`HTMLElement` 此字段为只读字段。支持视图的 DOM 元素。
`content`	已弃用：请改用 .children。类型：`Node optional` 请参阅 `AdvancedMarkerElementOptions.content`。

方法
`addListener`	已弃用：请改用标准 DOM `addEventListener()` 方法。 `addListener(eventName, handler)` 参数： `eventName: string` 观察到的事件。 `handler: Function` 用于处理事件的函数。返回值： `MapsEventListener` 生成的事件监听器。将给定的监听器函数添加到 Maps Eventing 系统中的给定事件名称。
继承的方法： `addEventListener`、`removeEventListener`

事件
`gmp-click`	`function(event)` 参数： `event: AdvancedMarkerClickEvent` 当用户点击 `AdvancedMarkerElement` 元素时，系统会触发此事件。仅支持 `addEventListener()`（而非 `addListener()`）。
`gmp-drag`	`function(event)` 参数： `event: Event` 在用户拖动 `AdvancedMarkerElement` 期间，此事件会反复触发。仅支持 `addEventListener()`（而非 `addListener()`）。
`gmp-dragend`	`function(event)` 参数： `event: Event` 此事件会在用户停止拖动 `AdvancedMarkerElement` 时触发。仅支持 `addEventListener()`（而非 `addListener()`）。
`gmp-dragstart`	`function(event)` 参数： `event: Event` 当用户开始拖动 `AdvancedMarkerElement` 时，系统会触发此事件。仅支持 `addEventListener()`（而非 `addListener()`）。
`click`	已弃用：请改用 `AdvancedMarkerElement.gmp-click`。 `function(event)` 参数： `event: MapMouseEvent` 当用户点击 `AdvancedMarkerElement` 元素时，系统会触发此事件。不适用于 `addEventListener()`（请改用 `gmp-click`）。
`dragstart`	已弃用：请改用 `AdvancedMarkerElement.gmp-dragstart`。 `function(event)` 参数： `event: MapMouseEvent` 当用户开始拖动 `AdvancedMarkerElement` 时，系统会触发此事件。不适用于 `addEventListener()`（请改用 `gmp-dragstart`）。
`drag`	已弃用：请改用 `AdvancedMarkerElement.gmp-drag`。 `function(event)` 参数： `event: MapMouseEvent` 在用户拖动 `AdvancedMarkerElement` 期间，此事件会反复触发。不适用于 `addEventListener()`（请改用 `gmp-drag`）。
`dragend`	已弃用：请改用 `AdvancedMarkerElement.gmp-dragend`。 `function(event)` 参数： `event: MapMouseEvent` 当用户停止拖动 `AdvancedMarkerElement` 时，系统会触发此事件。不适用于 `addEventListener()`（请改用 `gmp-dragend`）。

AdvancedMarkerElementOptions 接口

接口 google.maps.marker.AdvancedMarkerElementOptions
由 AdvancedMarkerElement 实现

用于构建 AdvancedMarkerElement 的选项。

属性
`anchorLeft` 可选	类型：`string optional` 默认值：“-50%” CSS 长度百分比值，用于使标记的锚点相对于标记的左上角偏移。如果使用的视觉效果具有不同于默认标记的典型底部中心点的锚点，此功能会非常有用。
`anchorTop` 可选	类型：`string optional` 默认值：“-100%” CSS 长度百分比值，用于使标记的锚点相对于标记的左上角偏移。如果使用的视觉效果具有不同于默认标记的典型底部中心点的锚点，此功能会非常有用。
`collisionBehavior` 可选	类型：`CollisionBehavior optional` 一个枚举，用于指定 `AdvancedMarkerElement` 与另一个 `AdvancedMarkerElement` 或矢量地图上的基本地图标签发生冲突时的行为方式。注意：`AdvancedMarkerElement` 与 `AdvancedMarkerElement` 之间的冲突在光栅地图和矢量地图上均可检测到，但 `AdvancedMarkerElement` 与基本地图标签之间的冲突只能在矢量地图上检测到。
`content` 可选	类型：`Node optional` 默认值：`PinElement` 支持 `AdvancedMarkerElement` 视觉效果的 DOM 元素。注意：`AdvancedMarkerElement` 不会克隆传入的 DOM 元素。将 DOM 元素传递给 `AdvancedMarkerElement` 后，如果将同一 DOM 元素传递给另一个 `AdvancedMarkerElement`，则会移动该 DOM 元素，并导致上一个 `AdvancedMarkerElement` 看起来是空的。
`gmpClickable` 可选	类型：`boolean optional` 默认值：`false` 如果为 `true`，`AdvancedMarkerElement` 将可以点击，并会触发 `gmp-click` 事件，还可以进行互动以实现无障碍功能（例如，允许通过箭头键进行键盘导航）。
`gmpDraggable` 可选	类型：`boolean optional` 默认值：`false` 如果为 `true`，则可以拖动 `AdvancedMarkerElement`。注意：具有海拔高度的 `AdvancedMarkerElement` 不可拖动。
`map` 可选	类型：`Map optional` 要在其上显示 `AdvancedMarkerElement` 的地图。地图必须显示 `AdvancedMarkerElement`，如果在构建时未提供，则可以通过设置 `AdvancedMarkerElement.map` 来提供。
`position` 可选	类型：`LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` 设置 `AdvancedMarkerElement` 的位置。`AdvancedMarkerElement` 可以在没有位置信息的情况下构建，但在提供位置信息（例如，通过用户的操作或选择）之前不会显示。如果在构造时未提供 `AdvancedMarkerElement` 的位置，则可以通过设置 `AdvancedMarkerElement.position` 来提供。注意：只有矢量地图支持带海拔高度的 `AdvancedMarkerElement`。
`title` 可选	类型：`string optional` 鼠标悬停文本。如果提供了无障碍文本（例如，供屏幕阅读器使用），系统会使用提供的值将该文本添加到 `AdvancedMarkerElement`。
`zIndex` 可选	类型：`number optional` 所有 `AdvancedMarkerElement` 按照其 zIndex 的顺序显示在地图上，值较高的会显示在值较低的 `AdvancedMarkerElement` 前面。默认情况下，`AdvancedMarkerElement` 会根据其在屏幕上的垂直位置进行显示，垂直位置较低的 `AdvancedMarkerElement` 会显示在垂直位置较高的 `AdvancedMarkerElement` 前面。将具有显式 `zIndex` 的标记与没有显式的标记混合使用可能会导致意外的视觉效果。为确保行为可预测，建议您为所有标记设置 `zIndex`，或不设置。请注意，`zIndex` 还用于帮助确定 `CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY` 高级标记之间的相对优先级。`zIndex` 值越高，表示优先级越高。

AdvancedMarkerClickEvent 类

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

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

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

PinElement 类

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

PinElement 表示由形状和字形组成的 DOM 元素。该形状具有与默认 AdvancedMarkerElement 或 Marker3DElement 相同的气球样式。字形是显示在气球形状中的可选 DOM 元素。PinElement 的宽高比可能会因其 PinElement.scale 而异。

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

构造函数
`PinElement`	`PinElement([options])` 参数： `options: PinElementOptions optional`

属性
`background`	类型：`string optional` 图钉形状的背景颜色。请参阅 `PinElementOptions.background`。
`borderColor`	类型：`string optional` 图钉形状的边框颜色。请参阅 `PinElementOptions.borderColor`。
`glyphColor`	类型：`string optional` 图钉字形的颜色。请参阅 `PinElementOptions.glyphColor`。
`glyphSrc`	类型：`URL\|string optional` 要在图钉中显示的字形图片的来源。请参阅 `PinElementOptions.glyphSrc`。
`glyphText`	类型：`string optional` 图钉中显示的文字。请参阅 `PinElementOptions.glyphText`。
`scale`	类型：`number optional` 请参阅 `PinElementOptions.scale`。
`element` readonly	已弃用：请直接使用 PinElement。类型：`HTMLElement` 此字段为只读字段。支持视图的 DOM 元素。
`glyph`	已弃用：请改用 `PinElementOptions.glyphText` 或 `PinElementOptions.glyphSrc`。类型：`string\|Element\|URL optional` 请参阅 `PinElementOptions.glyph`。

方法
继承的方法： `addEventListener`、`removeEventListener`

PinElementOptions 接口

接口 google.maps.marker.PinElementOptions
由 PinElement 实现

用于创建 PinElement 的选项。

属性
`background` 可选	类型：`string optional` 图钉形状的背景颜色。支持任何 CSS 颜色值。
`borderColor` 可选	类型：`string optional` 图钉形状的边框颜色。支持任何 CSS 颜色值。
`glyph` 可选	已弃用：请改用 `PinElementOptions.glyphText` 或 `PinElementOptions.glyphSrc`。类型：`string\|Element\|URL optional` 图钉中显示的 DOM 元素。
`glyphColor` 可选	类型：`string optional` 字形的颜色。支持任何 CSS 颜色值。
`glyphSrc` 可选	类型：`URL\|string optional` 要在图钉中显示的字形图片的来源。
`glyphText` 可选	类型：`string optional` 图钉中显示的文本。
`scale` 可选	类型：`number optional` 默认值：`1` 图钉的缩放比例。