Jān*_*ris 2 triggers click button openlayers
我正在尝试向OpenLayers地图添加一个按钮,该按钮应该在单击时调用JS函数.我设法让它看起来像我想要的,但触发功能不起作用.
如果我有Control.Navigation存在,单击按钮似乎开始拖动事件,我可以通过单击该按钮来拖动地图.但即使我删除所有其他控件,按钮的触发器处理程序也不会被调用.
我也尝试添加"autoActivate"参数(由于某些原因,它不会使控件自动激活),我已经尝试在添加它之后为按钮调用activate()函数,这似乎切换了控件的"活动"属性,但它仍然不响应点击.
有人可以指出我正确的方向,或者发布一个有效的例子吗？我的非工作示例如下.
谢谢,贾尼斯
<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>
由于面板DIV(包含按钮)没有尺寸,因此按钮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>