Question

这是张照片。默认的信息气泡会覆盖它所属的标记（请参见气泡的右下角）：

是否有一种简单的方法可以使标记出现在气泡上方，因此气泡不会将其隐藏？

当前，这很令人困惑，因为要弄清楚气泡属于哪个标记并不容易。

Answer 1

这是基于此处支持的另一个答案的简单解决方案：

var xy = map.geoToScreen(coords);

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

ui.addBubble(bubble);

coords是标记的坐标，它将信息窗口放置在标记上方30像素。

这对我有用，因为在我的情况下，标记始终位于地图的中心。

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

Answer 2

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

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

如何放置HERE地图信息气泡，因此它不会隐藏标记

2 个答案: