Клуб API Карт

Подсветка hotspot.Layer при наведении. Полигон "мерцает" .

spiner2002
25 февраля 2014, 11:36

Попробовал реализовать подсветку, вот что из этого вышло.

Полигон добавляетсяна карту но начинает мерцать(добавляться и удаляться), если указатель находится на нём.

Видимо при создании полигона генерируется mouseleave для слоя. Набросал пример для песочницы.  Как с это побороть?

 

<!DOCTYPE html>
<head>
    <title>Примеры. Метка и балун-панель.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
    <script src="//api-maps.yandex.ru/2.1.5/?lang=ru-RU&load=package.full" type="text/javascript"></script>
    <style type="text/css">
        #YMapsID {
            width: 350px;
            height: 300px;
        }
    </style>
<script type="text/javascript">
ymaps.ready(function () {
    var myMap = new ymaps.Map('YMapsID', {
            center: [55.709243, 37.500737],
            zoom: 10
        }, {
            // В нашем примере хотспотные данные есть только для 9 и 10 масштаба.
            // Поэтому ограничим диапазон коэффициентов масштабирования карты.
            minZoom: 10,
            maxZoom: 10,
            controls:[]
        });
    // Добавим на карту элемент управления коэффициентом масштабирования.
    myMap.controls.add('zoomControl', { top: 5 });
        // Шаблон URL для данных активных областей.
        // Источник данных будет запрашивать данные через URL вида:
        // '.../hotspot_layer/hotspot_data/9/tile_x=1&y=2', где
        // x, y - это номер тайла, для которого запрашиваются данные,
        // 9 - значение коэффициента масштабирования карты.
    var tileUrlTemplate = 'examples/maps/ru/hotspot_layer/hotspot_data/%z/tile_x=%x&y=%y',
        keyTemplate = 'testCallback_tile_%c',
        imgUrlTemplate = 'examples/maps/ru/hotspot_layer/images/%z/tile_x=%x&y=%y.png',
        objSource = new ymaps.hotspot.ObjectSource(tileUrlTemplate, keyTemplate),
        imgLayer = new ymaps.Layer(imgUrlTemplate, {tileTransparent: true}),
        hotspotLayer = new ymaps.hotspot.Layer(objSource, {cursor: 'help'});
    var myPolygon = new ymaps.Polygon([[[55.74489309135048,37.786381531249965],[55.80294816727334,37.75067596484372],[55.838512328706486,37.64493255664059],[55.823826741009086,37.496617126953105],[55.728622104880756,37.42383270312497],[55.652600730348944,37.550175476562465],[55.65415367105865,37.71085052539061],[55.74489309135048,37.786381531249965]]] , {}, {
       interactivityModel: 'default#transparent',
            fillColor: '#00FF00',
            strokeColor: '#0000FF',
            strokeWidth: 5
   })
    hotspotLayer.events.add('mouseenter', function (e) {
   myMap.geoObjects.add(myPolygon);
      });
    hotspotLayer.events.add('mouseleave', function (e) {
   myMap.geoObjects.remove(myPolygon);
    });
    myMap.layers.add(hotspotLayer);
    myMap.layers.add(imgLayer);
});
</script>
</head>
<body>
<div class="hero-unit">
    <div class="container">
        <div id="YMapsID"></div>
    </div>
</div>
</body>
</html>

 

1 комментарий
Подписаться на комментарии к посту

У вас происходит следующее - мышь наводится на хотспот, потом вы добавляете полигон поверх хотспота. Курсор считается попавшим в новый полигон, на хотспоте происходит mouseleave, полигон удаляется. И так по кругу.

 

Попробуйте задать полигону отрицательный zIndex. (ну или просто задать слою хотспотов больший zIndex, чем у полигонов)