Смена значка метки при наведении
Ещё один пример работы с событиями геообъекта - изменение значка метки при наведении на него указателя мыши.
index.html
event_rollover.js
<!DOCTYPE html>
<html>
<head>
<title>Смена значка метки при наведении</title>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<!--
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<script
src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш API-ключ>"
type="text/javascript"
></script>
<script src="event_rollover.js" type="text/javascript"></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map(
"map",
{
center: [55.755773, 37.617761],
zoom: 9,
},
{
searchControlProvider: "yandex#search",
}
),
myPlacemark = new ymaps.Placemark(myMap.getCenter());
myMap.geoObjects.add(myPlacemark);
myPlacemark.events
.add("mouseenter", function (e) {
// Ссылку на объект, вызвавший событие,
// можно получить из поля 'target'.
e.get("target").options.set("preset", "islands#greenIcon");
})
.add("mouseleave", function (e) {
e.get("target").options.unset("preset");
});
}