html - Openlayer弹出位置是底部中心

Question

您好，我正在使用 OpenLayers 3 弹出窗口，我试图将弹出窗口位置居中放置在我单击宽度和高度的位置的底部中间，但我找不到该怎么做...

我想要动态的东西，而不是基于预定义的高度和宽度。

我基于openlayers 3的例子创建了一个JSfiddle

DEMO

如果 left:50%; 有效，那会很简单，但因为它是 position:absolute，所以它没有任何效果。

.ol-popup {
  position: absolute;

  ...

  //left:-50%; Doesn't work so I don't know what to do
  left: -50px;
  min-width: 250px;
}

感谢您的回答

Answer 1

应该这样做:

overlay.on('change:position', function(evt) {
  var width=document.getElementsByClassName('ol-popup')[0].offsetWidth;
  var centerX=-width/2;
  var position=[centerX,0];
  this.setOffset(position);
});