Как добавить свои айди к меткам при создании карты и по клику на метку брать добавленный при её создании айди

Как добавить свои айдишники (или данные) к меткам при создании карты и по клику на метку брать добавленный при её создании айди и тригерить событие. Метки выводятся через кластер (их много)

Очень прошу помочь, уже 2 недели не могу найти решение

<script type="text/javascript">

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map1233", {
            center: [55.76, 37.64],
            zoom: 4
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 22,
            clusterDisableClickZoom: false
        });

        
            // Создание макета содержимого балуна.
            // Макет создается с помощью фабрики макетов с помощью текстового шаблона.
            MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
            ' <div class="popover top">' +
            ' <div class="arrow"> </div>' +
            ' <div class="popover-inner">' +
            '$[[options.contentLayout observeSize minWidth=235 maxWidth=1200 maxHeight=350]]' +
            ' </div>' +
            ' </div>',{
                

            // Переопределяем функцию build, чтобы при создании макета начинать
            // слушать событие click на кнопке-счетчике.
            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));
                this._$element.find('.ballonDetails')
                    .on('click', $.proxy(this.onClickDetails, 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');
            },

            onClickDetails: function (e) {
                e.preventDefault();
                let balonDetails = document.querySelector('.ballonDetails');
                balonDetails.addEventListener("click", function (event){
                    event.preventDefault();
                    
                    let href = $(this).attr('href');
                    $(href).trigger("click");
                    
                });
            },

            getShape: function () {
                if(!this._isElement(this._$element)) {
                    return MyBalloonLayout.superclass.getShape.call(this);
                }
                var 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];
                }
            });

            let MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
                ' <div class="balloonHeader-flex">$[properties.balloonHeader] </div>' +
                ' <div class="">$[properties.balloonContent] </div>'
            );

            let arrElCoords = [];
            let objOneElemCords = {};
            let countId = 0;
            
            

            <?php

            

            foreach($arResult["ITEMS"] as $key => $item):

            $xCoord = trim(explode(',', $item["PROPERTIES"]["DILER_COORDINATE"]["VALUE"])[0]);
            $yCoord = trim(explode(',', $item["PROPERTIES"]["DILER_COORDINATE"]["VALUE"])[1]);

                
            ?>
            
            objOneElemCords =  {
                                    "type": "Feature",
                                    "id": countId,
                                    "geometry": {
                                        "type": "Point",
                                        'balloonlocationUrl': "#<?php echo $item["PROPERTIES"]['DILER_CITY']['VALUE_ENUM_ID'][0]?>",
                                        "coordinates": [<?=$xCoord; ?>, <?=$yCoord; ?>]
                                    },
                                    "properties": {
                                        'hintContent': "<?php echo $item["PROPERTIES"]['DILER_CITY']["VALUE"][0]?>",
                                        'balloonHeader': '<div><p class="balloonHeader-text"><a class="ballonDetails" href="#<?php echo $item["PROPERTIES"]['DILER_CITY']['VALUE_ENUM_ID'][0]?>">Подробнее</a></p></div><div class="close-baloon-div"><a class="close close-baloon" href="#">x</a></div>',
                                        'balloonlocationUrl': "#<?php echo $item["PROPERTIES"]['DILER_CITY']['VALUE_ENUM_ID'][0]?>",
                                        "clusterCaption": '<div><p class="balloonHeader-text"><a class="ballonDetails" href="#<?php echo $item["PROPERTIES"]['DILER_CITY']['VALUE_ENUM_ID'][0]?>">Подробнее</a></p></div><div class="close-baloon-div"><a class="close close-baloon" href="#">x</a></div>',
                                        'balloonContent': '<p></p>'
                                    },
                                    "options": {
                                        'balloonShadow': false,
                                        'balloonLayout': MyBalloonLayout,
                                        'balloonContentLayout': MyBalloonContentLayout,
                                        'balloonPanelMaxMapArea': 0,
                                        'hideIconOnBalloonOpen': false,
                                        'balloonlocationUrl': "#<?php echo $item["PROPERTIES"]['DILER_CITY']['VALUE_ENUM_ID'][0]?>",
                                        'preset': 'islands#blackCircleDotIcon'
                                        
                                    }
                                }
            
            arrElCoords.push(objOneElemCords);  

            countId += 1;

            
            //objectManager.objects.options.set('test', "#<?php //echo $item["PROPERTIES"]['DILER_CITY']['VALUE_ENUM_ID'][0]?>");

        <?php
            endforeach;
        ?>

            let objArrElCoords = {
                "type": "FeatureCollection",
                "features": arrElCoords
            };


            objectManager.add(objArrElCoords);
                
            objectManager.clusters.options.set('preset', 'islands#blackClusterIcons');
            /* objectManager.objects.options.set('test', 'ASSSSSSS'); */

        
        

        myMap.geoObjects.events.add('click', function (e) {
                // Объект на котором произошло событие
                var target = e.get('target');
                var objectId = e.get('objectId');
                
                /* console.log(target.options._baseItem._oldParent._options.test); */
                
                /* let id = target.options.get('locationUrl');
                $(id).trigger("click"); */
        });


    myMap.geoObjects.add(objectManager);

    objectManager.events.add('click', function (e) {

        var target = e.get('target');

    });
    

};

</script>   

Ответы (0 шт):