Запись текста из массива в iconContent и balloonHeader

185
09 ноября 2018, 12:20
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="#">&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>'

);

Кластеризация:

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

Вопроса два:

  1. Как записать значения из массива addressP в подпись метки и шапку балуна.
  2. Как передать в функцию smena номер метки, чтобы именно она меняла иконку метки?
READ ALSO
Заменить все вхождения &ldquo;ключевых слов&rdquo; на одноименные поля объекта

Заменить все вхождения “ключевых слов” на одноименные поля объекта

Нужно заменить в строке все вхождения "ключевых слов" на соответствующие им поля объекта"Ключевое слово" всегда начинается с # (если необходимо,...

163
Как привязать объекты к responsive изображению?

Как привязать объекты к responsive изображению?

Как привязать объекты к responsive изображению? К примеру: У меня есть карта 2500x3000px, на ней изображены островаЕсть спрайт человечка с номером команды...

167
Passay с несколькими языками

Passay с несколькими языками

Использую бибилиотеку passay, для проверки паролей в веб-проекте на spring bootКак добавить кастомный файл с локализацией разобрался

135