Параметр триггера OpenLayers.Control.Button не вызывается

Я пытаюсь добавить кнопку на карту OpenLayers, которая должна вызывать функцию JS при нажатии. Мне удалось заставить его выглядеть так, как я хотел бы, но функция триггера не работает.

Если у меня присутствует Control.Navigation, нажатие на кнопку, кажется, запускает событие перетаскивания, и я могу перетащить карту, нажав даже на эту кнопку. Но даже если я удалю все остальные элементы управления, обработчик триггера кнопки не будет вызван.

Я также попытался добавить параметр «autoActivate» (который по какой-то причине не делает элемент управления автоматически активным), я попытался вызвать функцию активации () для кнопки после того, как я ее добавил, что, похоже, переключает "активное" свойство элемента управления, но оно по-прежнему не реагирует на щелчки.

Может кто-нибудь указать мне правильное направление, пожалуйста, или опубликовать рабочий пример? Мой нерабочий пример ниже.

Спасибо, Янис

<html>
<head>
<title>OpenLayers.Control.Button</title>
<style text="text/css">
.olControlButton {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    width: 22px;
    height: 22px;
}
</style>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var panel;

function buttonClicked()
{
    alert ('Button clicked.');
}

function init()
{
    map = new OpenLayers.Map ('map', {controls: [/*new OpenLayers.Control.Navigation()*/]});
    map.addLayer (new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}));
    map.zoomToMaxExtent();

    panel = new OpenLayers.Control.Panel();
    map.addControl (panel);

    panel.addControls ([new OpenLayers.Control.Button ({autoActivate: true, displayClass: 'olControlButton', trigger: buttonClicked, title: 'Button is to be clicked'})]);
    //panel.controls[0].activate(); <-- this does not help.
}
</script>
</head>
<body onload="init()">
    <div id="map" style="border: 2px solid black; height: 500px"></div>
</body>
</html>

button click triggers openlayers
person Jānis Elmeris    schedule 11.05.2011    source источник

Ответы (1)


arrow_upward
8
arrow_downward

DIV кнопки не может получать события щелчка, так как DIV панели (которая содержит кнопку) не имеет размеров. Вы также должны стилизовать панель DIV. Также класс, присвоенный кнопке под панелью, — olControlButtonItemActive, поэтому вам нужно стилизовать ее вместо olControlButton.

OpenLayers.Control.Panel обрабатывает активацию дочерних элементов управления, чтобы он автоматически активировал кнопку, вы должны установить для параметра defaultControl значение button при создании нового экземпляра Panel. В противном случае вам придется нажать кнопку один раз, прежде чем вы сможете активировать ее.

<html>
<head>
<title>OpenLayers.Control.Button</title>
<style text="text/css">
.olControlButtonItemActive {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    width: 22px;
    height: 22px;
}

.olControlPanel {
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

</style>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var panel;

function buttonClicked()
{
    alert ('Button clicked.');
}

function init()
{
    map = new OpenLayers.Map ('map', {controls: [/*new OpenLayers.Control.Navigation()*/]});
    map.addLayer (new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}));
    map.zoomToMaxExtent();

    button = new OpenLayers.Control.Button ({displayClass: 'olControlButton', trigger: buttonClicked, title: 'Button is to be clicked'});

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

}
</script>
</head>
<body onload="init()">
    <div id="map" style="border: 2px solid black; height: 500px"></div>
</body>
</html>
person aviaron    schedule 12.05.2011
comment
Аргх, спасибо большое! Это стало для меня очень неприятной проблемой. Я думаю, что уже пробовал стиль панели, но, вероятно, в то время сделал какую-то ошибку. Если я удалю настройку кнопки по умолчанию, кнопка фактически исчезнет. Что, если я хочу добавить две кнопки? Только один может быть по умолчанию. - person Jānis Elmeris; 13.05.2011
comment
Небольшое исправление: кнопка не должна быть активирована панелью, чтобы ее можно было использовать, в отличие от элементов управления типа OpenLayers.Control.TYPE_TOGGLE. Вы можете опустить параметр defaultControl и стилизовать обе кнопки, используя класс olControlButtonItemInActive css. - person aviaron; 13.05.2011