0

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>

Как повесить событие на зеленую метку?

1 ответ 1

-2

Немного не дочитали вы документацию, см. последний раздел Интерактивность геообъектов. Для нестандартных точек необходимо описывать их геометрию, "активные области".

Ну и рабочий jsFiddle.

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,
      iconShape: {
        type: 'Rectangle',
        // Прямоугольник описывается в виде двух
        // точек - верхней левой и нижней правой.
        coordinates: [
          [-25, -25],
          [25, 25]
        ]
      }
    }
  );
  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');
    });
});
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="//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>

<div id="map"></div>

1
  • 3
    Хотя по ссылке можно найти ответ на вопрос, лучше указать выдержку ответа здесь.
    – DeKaNszn
    27 апр 2015 в 19:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.