свои метки на яндекс карте, свой стиль меток для яндекс карт, шаблон меток для яндекс карт
Делаем более красивым отображение стандартных яндекс карт битрикса.
Пункт 1. Стилизация маркера.
Для начала зададим маркер для отображения на картах, который будет использоваться вместо стандартного:
1
var option = { iconImageHref: ‘/bitrix/templates/alvik/images/map-marker.png’, iconImageSize: [38, 46], iconImageOffset: [-20, -50] };
З.Ы. Пока статикой, потом можно будет засунуть в настройки компонента, ну это уже рефакторинг кода самого компонента.
iconImageHref — путь до картинки маркера, лучше указывать абсолютным,
iconImageSize — размер маркера,
iconImageOffset — смещение центра маркера относительного нижнего хвостика.
Объявим его в функции добавления маркера window.BX_YMapAddPlacemark, и, соответственно добавим его в функцию отображения самого маркера:
1
2
3
4
5
var obPlacemark = new ymaps.Placemark(
[arPlacemark.LAT, arPlacemark.LON],
properties,
option
);
Пункт 2. Создание хавера для маркера.
Далее, сделаем еще более красивой нашу карту, создадим эффект хавера на маркере.
После добавления маркера, установим ему евенты:
1
2
3
4
5
6
7
obPlacemark.events.add(‘mouseenter’, function(e){
e.get(‘target’).options.set(‘iconImageHref’, placemarkIconsHover.iconImageHref);
});
obPlacemark.events.add(‘mouseleave’, function(e){
e.get(‘target’).options.set(‘iconImageHref’, placemarkIcons.iconImageHref);
});
Пункт 3. Передача текста в балун маркера.
Иногда хочется стилизованного текста, например картинку и ссылку на элемент, в балуне
Для этого, в пхп коде, при добавлении маркеров, выше вызова формирования самой карты добавляем:
1
2
3
4
$text = ‘
‘;
if( is_array( $arItem[«PREVIEW_PICTURE»] ) ){
$text .= ‘
‘;
}
И передаем этот текст в маркер:
1
2
3
4
5
$arPlacemarks[] = array(
«LON» => $coords[1],
«LAT» => $coords[0],
«DETAIL_TEXT» => $text,
);
,
И собственно в карту:
1
2
3
…
«MAP_DATA» => serialize(array(«yandex_lat» => $city_coords[0],»yandex_lon» => $city_coords[1], «yandex_scale» => 12, «PLACEMARKS» => $arPlacemarks)),
…
Далее, в функции добавления маркера window.BX_YMapAddPlacemark, инициализируем сам текст:
1
2
var properties = {};
properties.balloonContent = arPlacemark.DETAIL_TEXT.replace(/\n/g, ‘
‘);
Пункт 4. Кластеризация.
Добавим чуть-чуть интерактивности для карты. Сделаем объединение близким маркеров в кластеры, чтобы не сливалось при уменьшение масштаба.
Объявляем глобальные настройки для кластера, и, сам кластер:
1
2
var clusterIcons = [{ href: ‘/bitrix/templates/alvik/images/map-cluster.png’, size: [50, 50], offset: [-20, -50] }];
var clusterer;
Инициализируем:
1
2
3
4
5
6
7
var MyIconContentLayout = ymaps.templateLayoutFactory.createClass(‘
‘);
clusterer = new ymaps.Clusterer({
clusterIcons: clusterIcons,
clusterIconContentLayout: MyIconContentLayout,
zoomMargin: 50,
showInAlphabeticalOrder: true
});
clusterIcons — изображения для кластера, могут меняться в зависимости от количества входных элементов
clusterIconContentLayout — область для отображения количества входящих элементов
zoomMargin — минимальный отступ от краев карты до маркеров при увеличении масштаба (при клике на кластер)
showInAlphabeticalOrder — сортировка элементов в кластере, по умолчанию сортируется по включению, нужна, если достигнут максимальный зум и несколько элементов входят в кластер.
В функции добавления маркера window.BX_YMapAddPlacemark изменяем добавления маркера на карту, на добавление маркера в кластер
1
clusterer.add( obPlacemark );
И в функции формирования маркеров function BX_SetPlacemarks_(map) добавляем кластер на карту
1
map.geoObjects.add( clusterer );
Пункт 5. Добавление хавера на кластер.
И еще раз украсим нашу карту хаверами.
После созданяи кластера пропишем ему евенты:
1
2
3
4
5
6
7
8
var clusterIconsHover = [{ href: ‘/bitrix/templates/alvik/images/map-marker-hover.png’, size: [38, 46], offset: [-20, -50] }];
clusterer.events.add(‘mouseenter’, function(e){
e.get(‘target’).options.set(‘icons’, clusterIconsHover);
});
clusterer.events.add(‘mouseleave’, function(e){
e.get(‘target’).options.set(‘icons’, clusterIcons);
});
Пункт 6. Подсветка маркера при наведении на ссылку элементы в общем списке.
Интерактивность интерактивность и еще раз интерактивность, допустим у нас выводится общая карта со всеми маркерами элементов и внизу нее выводятся ссылки на эти элементы, хочется, чтобы при наведении на элемент маркер, принадлежащий ему, подсвечивался, для того, чтобы не нужно было прокликивать все маркеры, чтоб узнать к какому элементу он принадлежит.
Для этого добавим скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
$(‘.places-list li a’).mouseover(function(){
for( i = 0; i
и в событие $(‘.places-list li a’) добавляем условия определения выхождения координат маркера за карту:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$(document).ready(function(){
$(‘.places-list li a’).mouseover(function(){
for( i = 0; i mc[1][0] ){
$(‘.top-arrow’).show();
}
if( pc[1] > mc[1][1] ){
$(‘.right-arrow’).show();
}
if( pc[0] > mc[0][0] && pc[1] > mc[0][1] && pc[0] mc[1][0] || pc[1] > mc[1][1] ){
$(‘.maps-arrow’).hide();
}else{
arObjects.PLACEMARKS[i].events.fire(‘mouseleave’, [arObjects.PLACEMARKS[i].geometry.getCoordinates()]);
}
}
}
})
})