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

感谢任何anwser

Answer 1

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

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

同时从position:absolute css类

中删除.ol-popup

只需确保在容器准备好后触发该功能。如果您只是将听众功能改为我的建议。它不会在第一次点击时工作，但它应该适用于第一次点击后的每次点击。查看代码，了解想法，并根据您的情况进行调整。

检查你的小提琴here（如所说的点击两次以查看它的实际效果）。或者更好here而不删除绝对位置

Answer 2

这应该这样做：

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

Answer 3

如果你想集中一些东西，只需使用它：

.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
}

Openlayer弹出位置是底部中心

3 个答案: