Advanced Markers

Класс AdvancedMarkerElement

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

Показывает местоположение на карте. Обратите внимание, что для показа AdvancedMarkerElement необходимо задать position.

<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])
Параметры:
Создает объект AdvancedMarkerElement с указанными параметрами. Если карта указана, то при создании AdvancedMarkerElement добавляется на карту.
anchorLeft
attr: anchor-left
Тип: string optional
Значение по умолчанию: -50 %.
Значение CSS length-percentage, которое используется для смещения опорной точки маркера относительно его левого верхнего угла. Это полезно, если у визуального элемента есть точка привязки, которая отличается от стандартной точки внизу по центру маркера по умолчанию.
HTML-атрибут: anchor-left="string"
anchorTop
attr: anchor-top
Тип: string optional
Значение по умолчанию: -100 %.
Значение CSS length-percentage, которое используется для смещения опорной точки маркера относительно его левого верхнего угла. Это полезно, если у визуального элемента есть точка привязки, которая отличается от стандартной точки внизу по центру маркера по умолчанию.
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
Посмотрите 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
Тип: HTMLElement
Это поле доступно только для чтения. Элемент DOM, поддерживающий представление.
content
Тип: Node optional
Посмотрите AdvancedMarkerElementOptions.content.
addListener
addListener(eventName, handler)
Параметры:
  • eventName: string наблюдаемое событие.
  • handler: Function Функция для обработки событий.
Возвращаемое значение: MapsEventListener – итоговый прослушиватель событий.
Добавляет заданную функцию прослушивателя к заданному названию события в системе событий Maps.
Унаследованные: addEventListener, removeEventListener
gmp-click
function(event)
Аргументы:
Это событие активируется при нажатии на элемент AdvancedMarkerElement. Поддерживается только с addEventListener() (вместо addListener()).
gmp-drag
function(event)
Аргументы:
Это событие активируется многократно во время перетаскивания AdvancedMarkerElement. Поддерживается только с addEventListener() (вместо addListener()).
gmp-dragend
function(event)
Аргументы:
Это событие активируется, когда пользователь заканчивает перетаскивать AdvancedMarkerElement. Поддерживается только с addEventListener() (вместо addListener()).
gmp-dragstart
function(event)
Аргументы:
Это событие активируется, когда пользователь начинает перетаскивать AdvancedMarkerElement. Поддерживается только с addEventListener() (вместо addListener()).
click
function(event)
Аргументы:
Это событие активируется при нажатии на элемент AdvancedMarkerElement.

Недоступно с addEventListener() (используйте gmp-click).
dragstart
function(event)
Аргументы:
Это событие активируется, когда пользователь начинает перетаскивать AdvancedMarkerElement.

Недоступно с addEventListener() (используйте gmp-dragstart).
drag
function(event)
Аргументы:
Это событие активируется многократно во время перетаскивания AdvancedMarkerElement.

Недоступно с addEventListener() (используйте gmp-drag).
dragend
function(event)
Аргументы:
Это событие активируется, когда пользователь заканчивает перетаскивать AdvancedMarkerElement.

Недоступно с addEventListener() (используйте gmp-dragend).

Интерфейс AdvancedMarkerElementOptions

интерфейс google.maps.marker.AdvancedMarkerElementOptions
реализован AdvancedMarkerElement

Параметры для создания AdvancedMarkerElement.
anchorLeft
необязательно
Тип: string optional
Значение по умолчанию: -50 %.
Значение CSS length-percentage, которое используется для смещения опорной точки маркера относительно его левого верхнего угла. Это полезно, если у визуального элемента есть точка привязки, которая отличается от стандартной точки внизу по центру маркера по умолчанию.
anchorTop
необязательно
Тип: string optional
Значение по умолчанию: -100 %.
Значение CSS length-percentage, которое используется для смещения опорной точки маркера относительно его левого верхнего угла. Это полезно, если у визуального элемента есть точка привязки, которая отличается от стандартной точки внизу по центру маркера по умолчанию.
collisionBehavior
необязательно
Тип: CollisionBehavior optional
Перечисление, определяющее, как должен вести себя объект AdvancedMarkerElement, когда он пересекается с другим объектом AdvancedMarkerElement или с ярлыками базовой карты на векторной карте.

Примечание. Пересечение AdvancedMarkerElement с AdvancedMarkerElement работает как на растровых, так и на векторных картах, а пересечение AdvancedMarkerElement с ярлыком базовой карты – только на векторных.
content
необязательно
Тип: Node optional
По умолчанию: PinElement.
Элемент DOM, поддерживающий визуальное представление AdvancedMarkerElement.

Примечание. Метод 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
необязательно
Задает положение 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])
Параметры:
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
Тип: HTMLElement
Это поле доступно только для чтения. Элемент DOM, поддерживающий представление.
glyph
Тип: string|Element|URL optional
Посмотрите PinElementOptions.glyph.
Унаследованные: addEventListener, removeEventListener

Интерфейс PinElementOptions

интерфейс google.maps.marker.PinElementOptions
реализован PinElement

Параметры для создания PinElement.
background
необязательно
Тип: string optional
Цвет фона маркера. Поддерживается любое значение цвета CSS.
borderColor
необязательно
Тип: string optional
Цвет границы маркера. Поддерживается любое значение цвета CSS.
glyph
необязательно
Тип: string|Element|URL optional
Элемент DOM, который показывается в маркере.
glyphColor
необязательно
Тип: string optional
Цвет глифа. Поддерживается любое значение цвета CSS.
glyphSrc
необязательно
Тип: URL|string optional
Источник изображения глифа, которое будет показываться в маркере.
glyphText
необязательно
Тип: string optional
Текст, который показывается в маркере.
scale
необязательно
Тип: number optional
По умолчанию: 1.
Масштаб маркера.