OpenLayers.Control.Button의 트리거 매개 변수가 호출되지 않습니다.

클릭 할 때 JS 함수를 호출해야하는 OpenLayers 맵에 버튼을 추가하려고합니다. 내가 원하는대로 표시되도록 관리했지만 트리거 기능이 작동하지 않습니다.OpenLayers.Control.Button의 트리거 매개 변수가 호출되지 않습니다.

Control.Navigation이있는 경우 단추를 클릭하면 끌기 이벤트가 시작되는 것처럼 보이며 해당 단추를 클릭하여지도를 끌 수 있습니다. 그러나 다른 모든 컨트롤을 제거하더라도 버튼의 트리거 핸들러는 호출되지 않습니다.

"autoActivate"매개 변수 (어떤 이유로 든 자동으로 컨트롤을 활성화하지 않음)를 추가하려고 시도했지만 추가 한 후에 버튼에 activate() 함수를 호출하려고했습니다. 컨트롤의 "활성"속성을 토글하는 것처럼 보이지만 여전히 클릭에 응답하지 않습니다.

나를 올바른 방향으로 안내하거나, 실례를 올릴 수 있습니까? 나의 비 작동 예제는 다음과 같다. 패널 DIV는 (버튼을 포함하는) 더 차원이 없기 때문에

감사합니다, 제니스

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

출처

2011-05-11 Jānis Elmeris

버튼의 DIV는 클릭 이벤트를받을 수 없습니다. 패널 DIV도 스타일을 지정해야합니다. 또한 패널 아래의 버튼에 주어진 클래스는 olControlButtonItemActive이므로 olControlButton 대신 스타일을 지정해야합니다.

OpenLayers.Control.Panel이 자식 컨트롤의 활성화를 처리 할 때 자동으로 버튼을 활성화하려면 새 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>

출처

2011-05-12 13:59:08 aviaron

아악은, 대단히 감사합니다! 이것은 나에게 매우 좌절스러운 문제가되었다. 나는 이미 패널 스타일링을 시도했지만, 아마도 실수를 한 것 같습니다. 기본 단추 설정을 제거하면 단추가 실제로 사라집니다. 버튼 두 개를 추가하려면 어떻게해야합니까? 오직 하나만 기본이 될 수 있습니다. –

작은 수정 : 사용하기 위해 패널에서 버튼을 활성화 할 필요는 없으며 OpenLayers.Control.TYPE_TOGGLE 유형의 컨트롤을 사용하십시오. 'defaultControl' 옵션을 생략하고'olControlButtonItemInActive' css 클래스를 사용하여 두 버튼의 스타일을 지정할 수 있습니다. – aviaron

OpenLayers.Control.Button의 트리거 매개 변수가 호출되지 않습니다.

답변

관련 문제