Блог

Главная - Вопросы по программированию - OpenLayers.Управление.Параметр запуска кнопки не будет вызван

OpenLayers.Управление.Параметр запуска кнопки не будет вызван

#button #triggers #click #openlayers

#кнопка #триггеры #нажмите #openlayers

Вопрос:

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

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

Я также пытался добавить параметр «autoActivate» (который по какой-то причине все равно не делает элемент управления автоматически активным), я пытался вызвать функцию activate () для кнопки после того, как я ее добавил, которая, похоже, переключает свойство элемента управления «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:

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

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

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

Комментарии:

1. Аааа, большое вам спасибо! Это стало для меня очень неприятной проблемой. Я думаю, что я уже пробовал также стиль панели, но, вероятно, допустил какую-то ошибку в то время. Если я удалю настройку кнопки по умолчанию, кнопка фактически исчезнет. Что, если бы я захотел добавить две кнопки? Только один может быть выбран по умолчанию.

2. Небольшая поправка: кнопка не обязательно должна быть включена панелью для использования, это делают элементы управления типа OpenLayers.Control.TYPE_TOGGLE . Вы можете опустить defaultControl параметр и оформить обе кнопки с помощью olControlButtonItemInActive класса css.