我正在尝试修改 OpenLayers 示例以添加自定义按钮，但无法单击此按钮。我已经尝试了一切，但好像点击事件无法附加到按钮......问题出在哪里？我要生气了。任何帮助将不胜感激!这是我的代码(很抱歉发布完整的示例，但我无法缩短它):
<html>
<head>
<title>OpenLayers Editing Toolbar Example</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
<style type="text/css">
#btnHiLite {
top: 50%;
left: 3%;
height: 10px;
z-index: 3000;
background: url('http://s11.postimg.org/s3u0s4pjj/marker.png') no-repeat center;
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function rotate_image() {
alert("Button clicked!");
}
function init(){
var btnHiLite = new OpenLayers.Control.Button({
title: "click it to rotate image 90º",
id: 'btnHiLite',
trigger: rotate_image,
type: OpenLayers.Control.TYPE_BUTTON
});
var graphic = new OpenLayers.Layer.Image(
'Document Page',
"http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/landscape_7.jpg",
new OpenLayers.Bounds(-250, -100, 250, 100),
new OpenLayers.Size(250, 100)
);
map = new OpenLayers.Map( 'map', {
controls: [new OpenLayers.Control.PanZoom(), btnHiLite]
});
map.addLayers([graphic]);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Editing Toolbar Example</h1>
<div id="tags">
digitizing, point, line, linestring, polygon, editing
</div>
<p id="shortdesc">
Demonstrate polygon, polyline and point creation and editing tools.
</p>
<div id="panel"></div>
<div id="map" class="smallmap"></div>
</body>
</html>
最佳答案
好吧...我回答我自己的问题。我基本上需要:
1.- 创建一个面板以在其中添加按钮
var panel = new OpenLayers.Control.Panel({defaultControl: btnHiLite});
2.- 将按钮添加到面板
panel.addControls([btnHiLite]);
3.- 将面板添加到 map
map = new OpenLayers.Map( 'map', {
controls: [
new OpenLayers.Control.PanZoom(),
panel]
});
这是正确的代码:jsfiddle.net/gilan/wR4Ee
关于button - OpenLayers 添加自定义按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19586185/