ymaps.ready(function () { var myMap = new ymaps.Map('map',{ center: [46.953344, 142.741549], controls:['zoomControl','geolocationControl'], zoom : 16 });

Creating a balloon based on Twitter Bootstrap.

 MyBalloonLayout = ymaps.templateLayoutFactory.createClass( '<div class="popover top">' + '<a class="close" href="#">&times;</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>' );

Clustering:

 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 });

Tags:

  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);

and the function that should change the label icon

 function smena(i) { geoObjects[i].options.set({iconImageHref: 'locked1.png', iconColor: '#00bf0d',}); }

Question two:

  1. How to write values ​​from the addressP array into the label label and cap of the balloon.
  2. How to transfer the label number to the smena function so that it changes the label icon?

    0