Яндекс карта api 2.1. Вместо стандартной метки, ставится верстка. Нужно по нажатию на метку, добавлять класс в верстку которая находится в данной метке, а у остальных удалять класс. Event у метки я понял как добавить
place.events.add('click', function (e) {});
А как теперь взять класс блока который внутри этой метки, и добавить к ниму еще один???
var myMap, ymaps;
// Инициализировать карту
function init_point_map() {
var winWidth = $(window).width();
myMap = document.getElementById("map");
if (!myMap) return;
myMap = new ymaps.Map(myMap, {
center: [55.753215, 37.622504],
zoom: 11,
controls: []
});
myMap.controls.add("zoomControl", {});
if (winWidth <= 1024) {
myMap.behaviors.disable('drag');
}
var data = {
'points': [{
"infoPoint": '<div class="point">\
<div class="point__temp-wrp">\
<div class="point__temp"><span class="status-weather" style="background-image: url(images/overcast-day.svg);"></span> 19.6 С <sup>o</sup></div>\
<div class="point__temp_road">\
<svg class="icon icon-highway"><use xlink:href="#icon-highway"></use></svg>\
10.6 С <sup>o</sup>\
</div>\
<div class="point-photo"><svg class="icon icon-photo-camera"><use xlink:href="#icon-photo-camera"></use></svg></div>\
</div>\
</div>',
"latitude": 55.737789,
"longitude": 37.524173,
},
{
"infoPoint": '<div class="point">\
<div class="point__temp-wrp point__temp-wrp_red">\
<div class="point__temp"><span class="status-weather" style="background-image: url(images/overcast-day.svg);"></span> 19.6 С <sup>o</sup></div>\
<div class="point__temp_road">\
<svg class="icon icon-highway"><use xlink:href="#icon-highway"></use></svg>\
10.6 С <sup>o</sup>\
</div>\
<div class="point-photo"><svg class="icon icon-photo-camera"><use xlink:href="#icon-photo-camera"></use></svg></div>\
</div>\
</div>',
"latitude": 55.703489,
"longitude": 37.605884,
}
],
};
var results = [];
data.points.forEach(function(item, index) {
results.push(createPlacemark(item));
});
}
// Создать метку
function createPlacemark(item) {
var options = Object();
var squareLayout = ymaps.templateLayoutFactory.createClass(item.infoPoint);
var place = new ymaps.Placemark(
[item.latitude, item.longitude], {
hintContent: false
}, {
iconLayout: squareLayout,
iconShape: {
type: 'Rectangle',
coordinates: [
[-12, -20],
[192, 12]
]
}
}
);
place.events.add('click', function(e) {
});
myMap.geoObjects.add(place);
}
$(document).ready(function() {
if (ymaps != undefined) ymaps.ready(init_point_map);
});
#map {
width: 600px;
height: 450px;
}
.point {
position: absolute;
z-index: 123;
width: 12px;
height: 12px;
top: -6px;
left: -6px;
border-radius: 50%;
cursor: pointer;
background-color: #12ac0f;
}
.point_active {
transform: scale(1.5);
}
.point__temp-wrp {
position: absolute;
min-width: 150px;
height: 20px;
left: 24px;
top: 50%;
margin-top: -10px;
color: #fff;
font-size: 12px;
background-color: #97d830;
line-height: 12px;
}
.status-weather {
background-color: #76ab22;
}
.point__temp-wrp_red {
background-color: #b2152f;
}
.point__temp-wrp_red .point__temp:before {
border-right-color: #901328;
}
.point__temp-wrp_red .status-weather {
background-color: #901328;
}
.point__temp {
float: left;
position: relative;
padding-left: 30px;
padding-right: 7px;
height: 20px;
}
.point__temp:before {
content: '';
display: block;
position: absolute;
right: 100%;
top: 50%;
margin-top: -10px;
border-right: 10px solid #76ab22;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.point__temp .status-weather {
width: 25px;
background-size: 15px;
}
.point__temp_road {
float: left;
position: relative;
padding-left: 12px;
height: 20px;
}
.point__temp_road .icon {
width: 10px;
height: 12px;
position: absolute;
left: 0;
top: 50%;
margin-top: -6px;
}
.point-photo {
position: absolute;
left: 100%;
width: 20px;
height: 20px;
float: left;
background-color: #fff;
}
.point-photo .icon {
width: 12px;
height: 10px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -5px;
margin-left: -6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>