Openlayer彈出位置位於底部中心

Question

嗨，我正在使用OpenLayers 3彈出窗口，並且試圖將彈出窗口的位置居中放置在單擊寬度和高度的底部的中間位置，但是我找不到如何做的...

我想要動態的東西，而不是基於預定義的高度和寬度。

我基於openlayers 3的示例創建JSfiddle

演示

如果left:50%;那將很簡單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

將您的單擊偵聽器更改為此

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-popup CSS類中刪除position:absolute

只需確保容器准備好后即可觸發該功能。 如果您只是將監聽器功能更改為我建議的功能。 它不會在第一次單擊時起作用，但應該在第一次單擊后的每次單擊中起作用。 查看代碼，以了解其想法，並根據您的情況進行調整。

在此處檢查您的小提琴（如前所述，請單擊兩次以查看其操作）。 或者更好的是這里不刪除絕對位置

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
}