ymaps.ready(function () {
var myMap = new ymaps.Map('map',{
center: [46.953344, 142.741549],
controls:['zoomControl','geolocationControl'],
zoom : 16
});
Создание макета балуна на основе Twitter Bootstrap.
MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
'<div class="popover top">' +
'<a class="close" href="#">×</a>' +
'<div class="arrow"></div>' +
'<div class="popover-inner">' +
'$[[options.contentLayout observeSize maxWidth=220 maxHeight=220]]' +
'</div>' +
'</div>', {
build: function () {
this.constructor.superclass.build.call(this);
this._$element = $('.popover', this.getParentElement());
this.applyElementOffset();
this._$element.find('.close')
.on('click', $.proxy(this.onCloseClick, this));
},
clear: function () {
this._$element.find('.close')
.off('click');
this.constructor.superclass.clear.call(this);
},
onSublayoutSizeChange: function () {
MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);
if(!this._isElement(this._$element)) {
return;
}
this.applyElementOffset();
this.events.fire('shapechange');
},
applyElementOffset: function () {
this._$element.css({
left: -(this._$element[0].offsetWidth / 2),
top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight)
});
},
onCloseClick: function (e) {
e.preventDefault();
this.events.fire('userclose');
},
getShape: function () {
if(!this._isElement(this._$element)) {
return MyBalloonLayout.superclass.getShape.call(this);
}
position = this._$element.position();
return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
[position.left, position.top], [
position.left + this._$element[0].offsetWidth,
position.top + this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight
]
]));
},
_isElement: function (element) {
return element && element[0] && element.find('.arrow')[0];
}
});
MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<h3 class="popover-title">$[properties.balloonHeader]</h3>' +
'<div class="popover-content">$[properties.balloonContent]</div>'
);
Кластеризация:
clusterer = new ymaps.Clusterer({
clusterIconLayout: 'default#pieChart',
clusterIconPieChartRadius: 1.5 * myMap.getZoom()+5,
clusterIconPieChartCoreRadius: 10,
clusterIconPieChartStrokeWidth: 3,
groupByCoordinates: false,
hasBalloon: false,
hasHint: false,
gridSize:512,
maxZoom:18,
clusterDisableClickZoom: false
});
Метки:
getPointData = function () {
return {
iconContent: ['<div align="center" ><input id="slider" type="submit"
class="block2" value="Адрес" /></div>',],
balloonHeader: ['<div id="slider2" class="header">Адрес</div>'],
balloonContent: ['<div align="center"><input id="slider3"
type="button" onclick="smena(0)" class="block1" value="ОТКРЫТЬ""></div>',],
};
};
getPointOptions = function () {
return {
iconLayout: 'default#imageWithContent',
iconShape: {
type: 'Rectangle',
coordinates: [
[-20, -50], [50, 20]
]
},
iconColor: '#930005',
iconImageHref: 'locked.png',
iconImageOffset: [-20, -50],
iconImageSize: [3.5 * myMap.getZoom() + 8, 3.5 * myMap.getZoom()
+ 8],
balloonLayout: MyBalloonLayout,
balloonContentLayout: MyBalloonContentLayout,
balloonPanelMaxMapArea: 0,
iconContentOffset: [-50, 120]
};
};
points = [
[46.950306, 142.756225], [46.956177, 142.742292]
];
addressP = [
"Ленин", "Сталин"
];
geoObjects = [];
for (var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i),
getPointOptions(i));
};
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
и функция, которая должна менять иконку метки
function smena(i) {
geoObjects[i].options.set({iconImageHref: 'locked1.png', iconColor: '#00bf0d',});
}
Вопроса два:
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Нужно заменить в строке все вхождения "ключевых слов" на соответствующие им поля объекта"Ключевое слово" всегда начинается с # (если необходимо,...
Как привязать объекты к responsive изображению? К примеру: У меня есть карта 2500x3000px, на ней изображены островаЕсть спрайт человечка с номером команды...
Использую бибилиотеку passay, для проверки паролей в веб-проекте на spring bootКак добавить кастомный файл с локализацией разобрался