Маркеры

Класс DG.Marker
Класс DG.Icon
- Конструктор
- Опции
Класс DG.DivIcon
- Конструктор
- Опции

Класс DG.Marker

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

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

Конструктор

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

Опции

Опция	Тип	По умолчанию	Описание
`icon`	`Icon`	*	Иконка, используемая для отображения маркера.
`interactive`	`Boolean`	`true`	Если значение `false`, тогда обработчик клика по маркеру не вызывается.
`draggable`	`Boolean`	`false`	Возможность перетаскивать маркер.
`title`	`String`	`''`	Текст подсказки при наведении курсора на маркер (по умолчанию не отображается).
`alt`	`String`	`''`	Текст для alt атрибута иконки.
`zIndexOffset`	`Number`	`0`	По умолчанию, свойство z-index изображения маркера устанавливается автоматически. Используйте эту опцию, если необходимо разместить маркер поверх (или под) другим элементом, указав наибольшее (или наименьшее) значение.
`opacity`	`Number`	`1.0`	Прозрачность маркера.
`riseOnHover`	`Boolean`	`false`	Если значение `true`, тогда маркер отобразится поверх остальных при наведении на него мышкой.
`riseOffset`	`Number`	`250`	Позволяет задать шаг z-index при использовании `riseOnHover`.

События

Вы можете подписаться на следующие события используя эти методы.

Событие	Данные	Описание
`click`	`MouseEvent`	Вызывается при клике по маркеру.
`dblclick`	`MouseEvent`	Вызывается при двойном клике по маркеру.
`mousedown`	`MouseEvent`	Вызывается при нажатии кнопки мышки над маркером.
`mouseover`	`MouseEvent`	Вызывается при наведении курсора мышки на маркер.
`mouseout`	`MouseEvent`	Вызывается когда курсор мышки покидает область маркера.
`contextmenu`	`MouseEvent`	Вызывается при нажатии правой кнопки мышки над маркером.
`dragstart`	`Event`	Вызывается когда пользователь начинает перетаскивать маркер.
`drag`	`Event`	Вызывается во время перетаскивания маркера.
`dragend`	`DragEndEvent`	Вызывается когда пользователь прекращает перетаскивание маркера.
`move`	`Event`	Вызывается при перемещении маркера с помощью метода `setLatLng.`
`add`	`Event`	Вызывается при добавлении маркера на карту.
`remove`	`Event`	Вызывается при удалении маркера с карты.
`popupopen`	`PopupEvent`	Вызывается при открытии прикрепленного к маркеру балуна.
`popupclose`	`PopupEvent`	Вызывается при закрытии прикрепленного к маркеру балуна.

Методы

Метод	Возвращает	Описание
`addTo( <Map> map )`	`this`	Добавляет маркер на карту.
`getLatLng()`	`LatLng`	Возвращает текущие географические координаты маркера.
`setLatLng( <LatLng> latlng )`	`this`	Изменяет координаты маркера на переданные.
`setIcon( <Icon> icon )`	`this`	Изменяет иконку маркера.
`setZIndexOffset( <Number> offset )`	`this`	Изменяет свойство маркера zIndexOffset.
`setOpacity( <Number> opacity )`	`this`	Изменяет прозрачность маркера.
`update()`	`this`	Обновляет позиционирование маркера, удобно при изменении свойства `latLng` напрямую.
`bindPopup( <String> html \| <HTMLElement> el \| <Popup> popup, <Popup options> options? )`	`this`	Прикрепляет к маркеру балун с определенным HTML содержимым. Балун будет показан при клике на маркер.
`unbindPopup()`	`this`	Отвязывает балун от маркера.
`openPopup()`	`this`	Открывает балун, предварительно прикрепленный с помощью метода bindPopup.
`closePopup()`	`this`	Закрывает балун, если тот был открыт.
`togglePopup()`	`this`	Включает или отключает отображение балуна, который ранее был прикреплен с помощью метода bindPopup, при клике.
`setPopupContent( <String> html \| <HTMLElement> el, <Popup options> options? )`	`this`	Устанавливает HTML содержимое прикрепленному ранее балуну.
`bindLabel(<String> content, <Label options> options?)`	`this`	Добавляет всплывающую подсказку для маркера или обновляет содержимое уже созданной.
`unbindLabel()`	`this`	Отвязывает всплывающую подсказку от маркера.
`showLabel()`	`this`	Показывает всплывающую подсказку (в случае использования опции `static`).
`hideLabel()`	`this`	Cкрывает всплывающую подсказку (в случае использования опции `static`).
`toGeoJSON()`	`Object`	Возвращает GeoJSON представление маркера (GeoJSON Point).

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

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

marker.dragging.disable();

Свойство	Тип	Описание
dragging	`IHandler`	Обработчик перетаскивания маркера.

Класс 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 )`	`DG.icon(…)`	Создает объект иконки с переданными опциями.

Опции

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

Класс DG.DivIcon

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

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

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

По умолчанию установлен класс 'leaflet-div-icon', который стилизован как небольшой белый квадрат с тенью.

Конструктор

Конструктор	Использование	Описание
`DG.DivIcon( <DivIcon options> options )`	`DG.divIcon(…)`	Создает объект `DG.DivIcon` с переданными опциями.

Опции

Опция	Тип	Описание
`iconSize`	`Point`	Размер иконки в пикселях. Также может быть установлен с помощью CSS.
`iconAnchor`	`Point`	Координаты "ножки" иконки (относительно ее левого верхнего угла). Иконка будет установлена так, чтобы эта точка соответствовала в географическому положению маркера. По умолчанию "ножка" располагается по центру иконки, если указан ее размер.
`className`	`String`	Значение класса, которое будет присвоено иконке. По умолчанию `'leaflet-div-icon'`.
`html`	`String`	HTML код, который будет установлен как содержимое иконки. По умолчанию пустой.