Openlayer彈出位置是底部中心

嗨我正在使用OpenLayers 3彈出窗口，我試圖將彈出位置居中在哪裏我點擊任何寬度和高度，我找不到我該怎麼做...Openlayer彈出位置是底部中心

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

我上的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

來源

2016-01-22 Maxime4000

這應該是容易的，但我不知道你需要什麼。最初的例子是什麼？ –

我希望彈出窗口像doubleclick一樣，但出現在不在點擊位置右側的正確位置。 – Maxime4000

這應做到：

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

來源

2016-01-27 12:57:52 MichaelG

如果要居中的東西只是用這樣的：

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

來源

2016-01-22 17:55:56 VeloFX

它會工作，如果我沒有得到不同的寬度和高度的所有時間。 – Maxime4000

改變您的一次點擊收聽到這個

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無需拆卸絕對位置

來源

2016-01-24 12:43:04 pavlos

如果我不需要進行縮放，它會起作用，因爲放大時它會脫離位置。 – Maxime4000

Openlayer彈出位置是底部中心

回答

相關問題