Question

问题是弹出消息正在根据缩放级别移动位置。这是一个问题，因为它正在远离标记。我正在寻找的解决方案是在放大/缩放/输出事件期间弹出消息保持在其标记之上。这是弹出窗口：

// The popup
var popupContainer = document.getElementById('popup');
var popupContent = document.getElementById('popup-content');
var popupCloser = document.getElementById('popup-closer');

// Create an overlay to anchor the popup to the map
var popupOverlay = new ol.Overlay({
  element: popupContainer,
  autoPan: true,
  autoPanAnimation: {
  duration: 250
}
});
map.addOverlay(popupOverlay);

然后我设置了弹出窗口的位置：

// Make room for popup
ol.coordinate.add(clickCoordinate, [0, 800000]);

// Set Popup overlay position
popupOverlay.setPosition(clickCoordinate);

// Setup popup style
popupContainer.style.height = "100px;"
popupContent.style.overflowY = "scroll";
popupContent.style.height = "90px";
popupContent.style.width = "100px";

// Set popup content text
popupContent.innerHTML = "Hello World";

在初始缩放级别看起来一切都很好，但是当缩放发生变化时，弹出窗口开始远离标记。什么是正确的方式来调整＆＃34;弹出消息，所以它总是保持在标记之上？

由于

Answer 1

我发现问题就在于这一行：

// Make room for popup
ol.coordinate.add(clickCoordinate, [0, 800000]);

如果我发表评论，它可以正常工作，但我会弹出覆盖标记。

这是一个小提琴

http://jsfiddle.net/6RS2z/438/

如果你去上面小提琴，你会看到一行“取消注释这行以查看问题”。显然不是将弹出窗口放在标记上方的正确方法。如何让弹出窗口显示在标记上方而不是覆盖它？感谢。

Openlayers 3 - 使用ol.Overlay时更新弹出窗口的位置

1 个答案: