Параметр триггера OpenLayers.Control.Button не будет вызываться - PullRequest
Новая
       28

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

2 голосов
/ 11 мая 2011

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

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

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

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

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

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

1 Ответ

8 голосов
/ 12 мая 2011

Кнопка 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>
...