如何定位HERE maps infobubble,使其不隐藏标记

您可以尝试以下示例代码:

// 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

以下是我基于另一个答案的简单解决方案,这里支持:

var xy = map.geoToScreen(coords);

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

ui.addBubble(bubble);

坐标是标记坐标,它将信息窗口放置在标记上方30像素处。

这对我有用,因为在我的情况下,标记总是在地图的中心。

编辑:这并不完美,因为如果缩放地图,则标记和气泡会指向不同的位置,因此在缩放时还应该有一个事件处理程序来更新气泡位置