在openlayers地圖上水平添加兩個自定義按鈕

Question

我想向帶有開放層的地圖添加兩個額外的按鈕。用我的代碼只顯示第一個按鈕？什麼是錯在這裏？：

.olControlButton1ItemActive { 
    position: absolute; 
    background-image: url(add_blue.png); 
    top: 0; 
    right: 0; 
    width: 18px; 
    height: 18px; 
}  
.olControlButton2ItemActive { 
     position: absolute; 
     background-image: url(minus_blue.png); 
     top: 18; 
     right: 0; 
     width: 18px; 
     height: 18px; 
    } 


    .olControlPanel { 
     border: 1px solid black; 
     top: 70px; 
     left: 12px; 
     width: 18px; 
     height: 36px; 
     position: absolute; 
     cursor: pointer; 
    } 

....

map.setCenter (lonLat, zoom); 
var button1 = new OpenLayers.Control.Button ({displayClass: 'olControlButton1', trigger: button1Clicked, title: 'Button is to be clicked'}); 
var button2 = new OpenLayers.Control.Button ({displayClass: 'olControlButton2', trigger: button2Clicked, title: 'Button is to be clicked'}); 

panel = new OpenLayers.Control.Panel({defaultControl: button1}); 
panel.addControls([button1,button2]); 
map.addControl (panel); 

Answer 1

的問題是，.olControlPanel的寬度僅爲18像素，所以只有一個按鈕的地方。將其更改爲36像素，第二個按鈕應顯示水平。

Answer 2

您的代碼存在的問題是，當您將控件添加到面板時，默認情況下，其中只有一個是「活動」。因此Button1具有類olControlButton1ItemActive，但第二個Button具有類olControlButton2ItemInactive。

對於你的第二個按鈕才能正常工作，你必須激活它，通過在你的代碼的末尾添加此：

button2.activate() 

另一種方法是定義樣式olControlButton2ItemInactive，但這樣你的按鈕會是可見的，但它不會被啓用（所以如果你點擊它，它不會觸發事件）