Как добавить свои айди к меткам при создании карты и по клику на метку брать добавленный при её создании айди
Как добавить свои айдишники (или данные) к меткам при создании карты и по клику на метку брать добавленный при её создании айди и тригерить событие. Метки выводятся через кластер (их много)
Очень прошу помочь, уже 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>