Openlayer弹出位置是底部中心

Question

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

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

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

如果 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

如果你想将某些东西居中，只需使用这个：

.ol-popup {
  position: absolute;
  left: 50%;     //this will center the div
  top:50%;   

  width: 250px;  //width and height
  height:100px;  


  margin-left:-125px;  //to center the div at the absolute position (half the width)
  margin-top:-50px;  //to center the div at the absolute position (half the height)

  background-color:#000000;  //and a color for the div
}

Answer 2

将您的单击侦听器更改为此

map.on('singleclick', function(evt) {
  var coordinate = evt.coordinate;
  var pixel = evt.pixel;
  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
      coordinate, 'EPSG:3857', 'EPSG:4326'));
  var pixelPos = [pixel[0]-(container.offsetWidth/2),pixel[1]-container.offsetHeight];
  var coord = this.getCoordinateFromPixel(pixelPos);
  console.log("coords",coord)
  content.innerHTML = '<p>The arrow is in the middle<br/>And it\'s should pointing where I click (it\'s not the case...)</p><code>' + hdms +
      '</code>';
  overlay.setPosition(coord);
});

同时从您的 .ol-popupcss class

中删除 position:absolute

只需确保在容器准备就绪后触发该函数。如果您只是将侦听器功能更改为我建议的。它不会在第一次点击时起作用，但它应该在第一次点击后起作用。查看代码，了解思路，然后根据您的情况进行调整。

检查你的 fiddle here (as said click twice to see it in action). Or better here 而不删除绝对位置

Answer 3

应该这样做：

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);
});

Openlayer弹出位置是底部中心

Openlayer popup position is the bottom-center

html

css

popup

openlayers-3