Как расположить ЗДЕСЬ карты на инфубабле, чтобы он не скрывал маркер

Question

Как расположить ЗДЕСЬ карты на инфубабле, чтобы он не скрывал маркер

1

Вот картина. Инфобабль по умолчанию охватывает маркер, к которому он принадлежит (см. Нижний правый угол пузыря):

Это из их официального примера.

Есть ли простой способ сделать маркер выше пузыря, так что пузырь не скрывает его?

В настоящее время это сбивает с толку, потому что нелегко увидеть, к какому маркеру принадлежит пузырь.

Tom 06 авг. 2018, в 11:47

Источник

Теги:

javascript

here-api

2 ответа

Ещё вопросы

Tom · Answer 1 · 2018-08-06T18-35-00.000Z

Здесь мое простое решение, основанное на другом ответе "Поддержка" здесь:

var xy = map.geoToScreen(coords);

var bubble =  new H.ui.InfoBubble(map.screenToGeo(xy.x, xy.y - 30), {
  content: 'content'
});

ui.addBubble(bubble);

coords - координаты маркера, и он помещает infowindow на 30 пикселей выше маркера.

Это работает для меня, потому что в моем случае маркер всегда находится в центре карты.

Изменение: это не идеально, потому что, если вы увеличиваете масштаб карты, маркер и пузырь указывают на разные места, поэтому должен быть обработчик события, который обновляет положение пузырька при масштабировании

HERE Developer Support · Answer 2 · 2018-08-06T11-41-00.000Z

Вы можете попробовать этот пример кода:

// check if info bubble is visible, otherwise move the map center
            function checkInfoBubble(infoBubble){
                setTimeout(function() {
                      if(infoBubble && infoBubble.getState() == "open"){
                        var border = 50;
                        var objRect = infoBubble.getContentElement().parentElement.getBoundingClientRect();
                        var objStyleRight = Math.abs(parseInt(infoBubble.getContentElement().parentElement.style.right));
                        objStyleRight = objStyleRight ? objStyleRight : 0;

                        var mapRect = map.getElement().getBoundingClientRect();
                        var shiftX = 0;
                        var shiftY = 0;

                        // check, if infobubble isn't too far to up
                        if ((objRect.top-border)  < mapRect.top)  {
                            shiftY = (mapRect.top - (objRect.top-border));
                        }

                        // check, if infobubble isn't too far to the left
                        var objLeft = (objRect.left - objStyleRight);
                        if ((objLeft-border) < mapRect.left) {
                            shiftX = (mapRect.left - (objLeft-border));
                        } // check, if infobubble isn't too far to the right
                        else if ((objRect.right+border) > mapRect.right) {
                            shiftX = -(objRect.right - (mapRect.right-border));
                        }


                        if ((shiftX == 0) && (shiftY == 0)) {
                            return;
                        }

                        var currScreenCenter = map.geoToScreen(map.getCenter());
                        var newY = (currScreenCenter.y - shiftY);
                        var newX = (currScreenCenter.x - shiftX);

                         var newGeoCenter = map.screenToGeo(newX, newY);
                         map.setCenter(newGeoCenter, true); 
                    }


                 }, 20);
            }

Кроме того, здесь показано: https://tcs.ext.here.com/examples/v3/show_info_on_hover

Спасибо, я думал, что есть простой способ установить z-порядок метки по сравнению с инфопузырьком, поэтому метка закрывает хвост пузыря. Это возможно? Это было бы самым простым. Ваше решение также работает, конечно, я предполагаю, что его основная суть заключается в использовании методов geoToScreen и screenToGeo для вычисления положения инфопузырька над отметкой.