Openlayer弹出位置是底部中心答案

【问题标题】：Openlayer popup position is the bottom-centerOpenlayer弹出位置是底部中心
【发布时间】：2016-01-22 17:03:20
【问题描述】：

您好，我正在使用 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;
}

感谢您的任何回答

【问题讨论】：

这应该很容易，但我不知道你到底需要什么。原始示例是怎么回事？
我希望弹出窗口像双击一样，但出现在正确的位置而不是点击位置的右侧。

标签： html css popup openlayers-3

【解决方案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);
});

【讨论】：

【解决方案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 类中删除 position:absolute

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

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

【讨论】：

如果我不需要缩放就可以了，因为缩放时它会偏离位置。

【解决方案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
}

【讨论】：

如果我没有一直得到不同的宽度和高度，它会起作用。