Клуб API Карт

Позиционирование hint у объекта

Дарья Миронова
21 марта 2016, 21:04

Здравствуйте. Не знаю как правильно сделать позиционирование hint у маркера. Хочу вот что сделать: При наведении на маркер нужно чтобы у него появлялся хинт, который не будет двигаться туда сюда пока мы водим мышкой по маркеру. Также хочу сделать чтобы если хинт не вмещается на карте чтобы он появлялся в свободном месте карты(т.е если маркер внизу карты, хинт поялвляется сверху). Пример как должно работать http://prntscr.com/ai54di - это по умолчанию. А если к примеру не влазит снизу то должно отобразить вот так http://prntscr.com/ai55k1 . 

Вот какую только смогла сделать реализацию.

               
myMap = new ymaps.Map('map', {
     center:[53.902257,27.561831], // Минск
     zoom:13
});

var myCollection = new ymaps.GeoObjectCollection(),
HintLayout = ymaps.templateLayoutFactory.createClass( "<div class='item-mark' style='display: block'>" +
   "<p class='it-name'>{{ properties.title }}</p>" +
    "<p class='rec-addr'>{{ properties.address }}</p>" +
    "</div>", {}
),
markers='<?= json_encode($markers) ?>';
markers = JSON.parse(markers);

markers.forEach(function(item, i, markers) {
    var coords = item.coord.split(','),
        myPlacemark = new ymaps.Placemark([coords[0],coords[1]],{
             category_alias : item.category_alias,
             account : item.account,
             address: "Москва, ул. Зоологическая",
             title: "Центр современного"
        },{
             hintLayout: HintLayout,
             openHintOnHover: false,
        });

        myPlacemark.events.add('mouseleave',function(e) {
             var object = e.get('target');
             object.hint.close(true);
        });

        myPlacemark.events.add('mouseenter',function(e) {
             var object = e.get('target');
             object.hint.open(object.geometry.getCoordinates());
        });

        myCollection.add(myPlacemark);
});

По данной реализации появляется хинт, но если он не влазит на карте, то он просто не виден, а надо чтобы он в свободном месте появлялся

9 комментариев
Подписаться на комментарии к посту
Используйте хинт карты со своим макетом и данными метки, вместо хинта метки.
Логику позиционирования вам придётся реализовать самостоятельно
Дарья Миронова
22 марта 2016, 10:03
dimik,
Можете хоть немного подсказать по логике или коду куда двигаться( а то вообще нет идей. Один из главных вопросов это как определить что hint выходит за рамки карты с какой-то из сторон
Дарья Миронова
22 марта 2016, 07:29
А с чего хотя бы начать делать эту логику позиционирования? я не знаю как узнать выходит хинт за пределы карты или нет
Дарья Миронова
22 марта 2016, 09:19
Завязка на хинт карты сделана http://prntscr.com/aid9ce . Осталось только как-то с позиционированием разобраться. просто вообще не знаю как начать реализовывать логику для позиционирования. У меня даже сейчас не верно открывается hint на карте. сейчас вот так выглядит http://prntscr.com/aid9o7 . Мне получается надо его выше ставить + в зависимости от позиционирования как-то менять координаты язычка указывающего на метку
Дарья Миронова,
Выложите свой код на jsfiddle я попробую помочь
Дарья Миронова
22 марта 2016, 10:37
dimik,
Вот выложила, подключила стили ещё. Там логика с иконками есть, если будет мешать можете убрать её https://jsfiddle.net/qopybtm4/
Дарья Миронова
22 марта 2016, 10:39
dimik,
там я подогнала начальное расположение хинта. есть стиль вот такой
.item-mark{ top: -127px; left: -27px; } , если надо могу убрать его или можете переопределить его
Дарья Миронова,
Для простоты сделал без хвостика, сможете сами его добавить несложно.

https://jsfiddle.net/qopybtm4/4/
Дарья Миронова
22 марта 2016, 19:13
dimik,
Спасибо большое:)