如何在地圖上製作水平工具欄？

我想將OpenLayers.Control.Button放到水平工具欄（OpenLayers.Control.Panel）中，但現在按鈕是垂直樣式的。請參閱以下的jsfiddle：如何在地圖上製作水平工具欄？

預先感謝您！下面是代碼：

HTML：

<div id="mapdiv"></div>

的Javascript：

var options = { 
    numZoomLevels: 2, 
    controls: [new OpenLayers.Control.Navigation(), 
       new OpenLayers.Control.PanZoomBar()] 
}; 

map = new OpenLayers.Map("mapdiv", options); 

    var panel_type2 = new OpenLayers.Control.Panel({displayClass: 'Panel2'}); 
    map.addControl(panel_type2); 

    var _aBtn2 = new OpenLayers.Control.Button({displayClass: 'first', 
               type: OpenLayers.Control.TYPE_TOOL, 
               eventListeners: { 
                'activate': function(){alert('[First] Control of OpenLayers.Control.TYPE_TOGGLE type is activated')}, 
                'deactivate': function(){alert('[First] Control of OpenLayers.Control.TYPE_TOGGLE type is deactivated')} 
               }}); 
    panel_type2.addControls([_aBtn2]); 

    var _aBtn3 = new OpenLayers.Control.Button({displayClass: 'second', 
               type: OpenLayers.Control.TYPE_TOOL, 
               eventListeners: { 
                'activate': function(){alert('[Second] Control of OpenLayers.Control.TYPE_TOGGLE type is activated')}, 
                'deactivate': function(){alert('[Second] Control of OpenLayers.Control.TYPE_TOGGLE type is deactivated')} 
               }}); 
    panel_type2.addControls([_aBtn3]); 

map.addLayer(new OpenLayers.Layer('', { 
    isBaseLayer: true, 
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200) 
})); 
var buildingLayer = new OpenLayers.Layer.Vector("Buildings", { 
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200), 
    strategies: [new OpenLayers.Strategy.Cluster({ 
     autoActivate: true, 
     distance: 100 
    })] 
}); 

map.addLayer(buildingLayer); 
buildingLayer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-50.126, 36.755))]); 
map.zoomToMaxExtent();

CSS

#mapdiv { 
    width: 400px; 
    height: 400px; 
    border: 1px solid #dddddd; 
} 

.Panel2 { 
    width: 150px; 
    height: 20px; 
    cursor: pointer; 
    left: 50px; 
    background-color: #bbbbbb; 
} 

.firstItemInactive,.secondItemInactive { 
    background: #ff0000; 
    border: 2px solid #075f67; 
    width: 18px; 
    height: 18px; 
} 

.firstItemActive, .secondItemActive { 
    background: #00ff00; 
    border: 2px solid #dddddd; 
    width: 18px; 
    height: 18px; 
}

來源

2013-01-23 Steve Lam

添加浮動：左;

.firstItemInactive,.secondItemInactive { 
    background: #ff0000; 
    border: 2px solid #075f67; 
    width: 18px; 
    height: 18px; 
    float:left; 
} 

.firstItemActive, .secondItemActive { 
    background: #00ff00; 
    border: 2px solid #dddddd; 
    width: 18px; 
    height: 18px; 
    float:left; 
}

來源

2013-01-23 07:37:58

如何在地圖上製作水平工具欄？

回答

相關問題