Маркеры

DG.Marker

Маркер представляет собой маленькую картинку, которая связана с определенным местом на карте.

DG.marker([54.98, 82.89]).addTo(map);

Создание

Конструктор Описание
DG.Marker( <LatLng> latlng, <Marker options> options? ) Создает объект маркера с переданными географическими координатами и необязательными опциями.

Опции

Опция Тип По умолчанию Описание
icon Icon * Иконка, используемая для отображения маркера. Смотрите документацию по иконкам, для информации о настройке внешнего вида маркеров. Новые маркеры по умолчанию принимают стиль DG.Icon.Default().
interactive Boolean true Если значение false, тогда обработчик клика по маркеру не вызывается. Маркер ведет себя как часть нижележащего слоя карты.
draggable Boolean false Можно ли перетаскивать маркер или нет.
keyboard Boolean true Можно ли переходить к маркеру по нажатию на кнопку Tab и имитировать клик при нажатиии Enter.
title String '' Текст подсказки при наведении курсора на маркер (по умолчанию не отображается).
alt String '' Текст для alt атрибута иконки (полезно для accessibility).
zIndexOffset Number 0 По умолчанию, свойство z-index изображения маркера устанавливается автоматически, в зависимости от его географического положения (широты). Используйте эту опцию, если необходимо разместить маркер поверх (или под) другим элементом, указав большее, например 1000, (или меньшее) значение.
opacity Number 1.0 Прозрачность маркера.
riseOnHover Boolean false Если значение true, тогда маркер отобразится поверх остальных при наведении на него мышью.
riseOffset Number 250 Позволяет задать шаг z-index при использовании riseOnHover.
pane String 'markerPane' Панель карты, на которую будет добавлен маркер.

События

Событие Данные Описание
click MouseEvent Вызывается при клике (или тапу) по маркеру.
dblclick MouseEvent Вызывается при двойном клике (или двойному тапу) по маркеру.
mousedown MouseEvent Вызывается при нажатии кнопки мыши над маркером.
mouseover MouseEvent Вызывается при наведении курсора мыши на маркер.
mouseout MouseEvent Вызывается, когда курсор мыши покидает область маркера.
contextmenu MouseEvent Вызывается при нажатии правой кнопки мыши над маркером.
move Event Вызывается, когда маркер перемещается с помощью метода setLatLng или обычным перетаскиванием. Старые и новые координаты попадают в аргументы события как oldLatLng и latlng.
События перетаскивания
Событие Данные Описание
dragstart Event Вызывается, когда пользователь начинает перетаскивать маркер.
movestart Event Вызывается, когда маркер фактически начинает перемещаться во время перетаскивания.
drag Event Вызывается периодически, во время перетаскивания маркера.
dragend DragEndEvent Вызывается, когда пользователь прекращает перетаскивание маркера.
moveend Event Вызывается, когда маркер фактически прекращает перемещаться во время перетаскивания.

События, унаследованные от Layer

Событие Данные Описание
add Event Вызывается, когда слой (маркер) добавляется на карту
remove Event Вызывается, когда слой (маркер) удаляется с карты

События попапа, унаследованные от Layer

Событие Данные Описание
popupopen PopupEvent Вызывается, когда открывается попап, привязанный к данному слою (маркеру).
popupclose PopupEvent Вызывается, когда закрываетс попап, привязанный к данному слою (маркеру).

Методы

Метод Возвращает Описание
getLatLng() LatLng Возвращает текущую географическую позицию маркера.
setLatLng( <LatLng> latlng) this Устанавилвает позицию маркера по переданным географическим координатам.
setZIndexOffset( <Number> offset) this Изменяет смещение zIndex маркера.
setIcon( <Icon> icon) this Устанавливает иконку маркера
setOpacity( <Number> opacity) this Изменяет уровень прозрачности маркера.
bindLabel(<String> content, <Label options> options?) this Добавляет всплывающую подсказку для маркера или обновляет содержимое уже созданной.
unbindLabel() this Отвязывает всплывающую подсказку от маркера.
showLabel() this Показывает всплывающую подсказку (в случае использования опции static).
hideLabel() this Скрывает всплывающую подсказку (в случае использования опции static).

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

Обработчики взаимодействия

Свойства маркера включают в себя обработчики взаимодействия, которые позволяют контролировать интерактивное поведение маркера, а также подключение и отключение определенных возможностей, таких как перетаскивание (см. методы Handler). Например:

marker.dragging.disable();
Свойство Тип Описание
dragging Handler Обработчик перетаскивания маркера (мышью и тачем).

DG.Icon

Иконка, которую можно использовать при создании маркера. Например:

var myIcon = DG.icon({
    iconUrl: 'my-icon.png',
    iconRetinaUrl: 'my-icon@2x.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowRetinaUrl: 'my-icon-shadow@2x.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

DG.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

Создание

Конструктор Описание
DG.icon( <Icon options> options) Создает объект иконки, на основании переданных опций.

Опции

Опция Тип По умолчанию Описание
iconUrl String null Обязательный URL к изображению иконки (абсолютный или относительный).
iconRetinaUrl String null URL к изображению иконки для устройств с Retina экраном (абсолютный или относительный).
iconSize Point null Размер изображения иконки в пикселях.
iconAnchor Point null Координаты "ножки" иконки (относительно ее левого верхнего угла). Иконка будет установлена так, чтобы эта точка соответствовала географическому положению маркера. По умолчанию "ножка" располагается по центру иконки; дополнительно положение может быть настроено через отрицательные значения CSS-свойства margin.
popupAnchor Point null Координаты точки, из которой будет открываться попап (относительно iconAnchor).
shadowUrl String null URL к изображению тени иконки. Если не указан, тогда тени не будет.
shadowRetinaUrl String null URL к изображению тени иконки для устройств с Retina экраном. Если не указан, тогда тени не будет.
shadowSize Point null Размер изображения тени в пикселях.
shadowAnchor Point null Координаты "ножки" тени (относительно ее левого верхнего угла). Значение по умолчанию такое же, как у iconAnchor.
className String '' Значение класса, которое будет присвоено изображениям иконки и тени. По умолчанию пустое.

Опции, унаследованные от Layer

События

События, унаследованные от Layer

События попапа, унаследованные от Layer

Методы

Метод Возвращает Описание
createIcon(<HTMLElement> oldIcon?) HTMLElement Вызывается внутри библиотеки, когда должна быть показана иконка, возвращает HTML-элемент <img> со стилями, соответсвующими переданным опциям.
createShadow(<HTMLElement> oldIcon?) HTMLElement Тоже что и createIcon, но с тенью за иконкой.

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented

DG.DivIcon

Иконка для маркеров, которые используют простой элемент <div> вместо изображения. Наследуется от Icon, но игнорирует опции теней и iconUrl.

// вы можете установить стиль класса .my-div-icon в CSS
var myIcon = DG.divIcon({className: 'my-div-icon'});

DG.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

Создание

Конструктор Описание
DG.DivIcon( <DivIcon options> options ) Создает объект DG.DivIcon, на основании переданных опций.

Опции

Опция Тип По умолчанию Описание
html String '' HTML код, который будет установлен как содержимое иконки. По умолчанию пустой.
bgPos Point [0, 0] Опциональное относительное позиционирование фона в пикселях

Опции, унаследованные от Icon

Опции, унаследованные от Layer

События

События, унаследованные от Layer

События попапа, унаследованные от Layer

Методы

Методы, унаследованные от Icon

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented