Question

我想在带有openlayers的地图上添加两个额外的按钮。使用我的代码只显示第一个按钮？这有什么问题？：

.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

代码的问题在于，当您向Panel添加控件时，默认情况下只有其中一个是Active。因此Button1具有类olControlButton1ItemActive，但第二个Button具有类olControlButton2ItemInactive。

要使第二个按钮正常工作，您必须通过在代码末尾添加此按钮来激活它：

button2.activate()

另一种选择是定义olControlButton2ItemInactive的样式，但是这样你的按钮就会显示，但是它不会被启用（所以如果你点击它，它就不会触发事件）

Answer 2

问题是.olControlPanel的宽度只有18px，所以只有一个按钮的位置。将其更改为36px，第二个按钮应显示为水平。

在openlayers地图上水平添加两个自定义按钮

2 个答案: