Openlayer popup position является нижним центром

Question

Привет, я работал с всплывающим окном OpenLayers 3, и я пытаюсь сосредоточить всплывающее положение в нижней части окна, где я нажимаю все, что ширина и высота, и я не могу найти как бы я это сделал ...

Я хочу что-то динамическое, а не базовое по предопределенной высоте и ширине.

создать JSfiddle базу на примере OpenLayers 3

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

Спасибо за любую anwser

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

Answer 2

Если вы хотите отцентрировать что-то просто используйте:

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

изменения ваш единственный щелчок слушателю этого

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 от вашего .ol-popup css класс

Просто убедитесь, что функция запускается, как только контейнер готов. Если вы просто измените функцию слушателя на то, что я предлагаю. Он не будет работать при первом щелчке, но он должен работать на каждом щелчке после первого. Посмотрите в коде, чтобы получить эту идею, и приспособите ее к вашему делу.

проверьте свою скрипку here (как сказано дважды нажмите, чтобы увидеть его в действии). Или лучше here без удаления позиции абсолютного