ymaps.ready(function() {
var map = new ymaps.Map('map', {
center: [55.7, 37.6],
zoom: 10,
controls: []
});
var myPlacemarkCollection = new ymaps.GeoObjectCollection();
var polygonLayout = ymaps.templateLayoutFactory.createClass('<div class="search-map-marker">555</div>');
var polygonPlacemark = new ymaps.Placemark(
[55.662693, 37.558416], {}, {
iconLayout: polygonLayout
}
);
map.geoObjects.add(polygonPlacemark);
polygonPlacemark.events
.add('mouseenter', function(e) {
console.log('mouseenter');
e.get('target').options.set('preset', 'islands#greenIcon');
})
.add('mouseleave', function(e) {
console.log('mouseleave');
e.get('target').options.unset('preset');
});
var myPlacemark = new ymaps.Placemark(map.getCenter());
map.geoObjects.add(myPlacemark);
myPlacemark.events
.add('mouseenter', function(e) {
console.log('mouseenter');
e.get('target').options.set('preset', 'islands#greenIcon');
})
.add('mouseleave', function(e) {
console.log('mouseleave');
e.get('target').options.unset('preset');
});
});
</style> <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU&load=package.full&mode=debug" type="text/javascript"></script> <script src="https://yandex.st/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <style> html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.placemark_layout_container {
position: relative;
font-family: Georgia;
font-size: 40px;
text-align: center;
font-weight: bold;
}
/* Квадратный макет метки */
.square_layout {
position: absolute;
left: -23px;
top: -23px;
width: 46px;
height: 46px;
line-height: 46px;
border: 2px solid #218703;
background-color: #F8FDF7;
color: #218703;
}
/* Круглый макет метки */
.circle_layout {
background-color: white;
position: absolute;
left: -23px;
top: -23px;
width: 46px;
height: 46px;
border: 2px solid #225D9C;
color: #225D9C;
line-height: 46px;
/* Это CSS свойство не будет работать в Internet Explorer 8 */
border-radius: 50px;
}
/* Макет метки с "хвостиком" */
.polygon_layout {
position: relative;
background: #ffffff;
border: 4px solid #943A43;
width: 50px;
height: 50px;
position: absolute;
left: -28px;
top: -76px;
color: #943A43;
}
.polygon_layout:after,
.polygon_layout:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.polygon_layout:after {
border-top-color: #943A43;
border-width: 10px;
margin-left: -10px;
}
.polygon_layout:before {
border-top-color: #943A43;
border-width: 16px;
margin-left: -16px;
}
.search-map-marker {
width: auto;
min-width: 49px;
border-radius: 4px;
padding: 0 3px;
position: absolute;
border-width: 1px;
border-style: solid;
font-size: .75rem;
line-height: 16px;
font-weight: bold;
color: white;
text-align: center;
background-color: #53b50a;
border-color: #326d06;
}
.search-map-marker:before {
background-color: #53b50a;
border-color: #326d06;
display: inline-block;
margin: auto 0;
content: '';
width: 4px;
height: 4px;
position: absolute;
top: 14px;
left: 24px;
border-width: 0 1px 1px 0;
border-style: solid;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="map"></div>
Как повесить событие на зеленую метку?