OpenLayers添加自定義按鈕

我想修改一個OpenLayers示例來添加我的自定義按鈕，但我不能單擊此按鈕。我嘗試了一切，但它好像點擊事件不能附加到按鈕....問題在哪裏？我生氣了。任何幫助將不勝感激！這裏是我的代碼（抱歉後一個完整的例子，但我不能縮短它）：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>

來源

2013-10-25 user969228

添加此到的jsfiddle更容易爲人們快速地看到存在的問題和幫助你。 – kjelderg

是的，你是對的！我試過（http://jsfiddle.net/gilan/wR4Ee/），但我無法讓它運行良好... – user969228

好吧......我回答我的問題。我基本上需要：

1.-創建面板中添加按鈕，它

var panel = new OpenLayers.Control.Panel({defaultControl: btnHiLite});

2：按鈕添加到面板

panel.addControls([btnHiLite]);

3.-面板添加到地圖

map = new OpenLayers.Map('map', { 
    controls: [ 
     new OpenLayers.Control.PanZoom(), 
     panel] 
});

下面是正確的代碼：jsfiddle.net/gilan/wR4Ee

來源

2013-11-04 14:28:02 user969228

我不喜歡OpenLayer自己的控制框架。使用自己的，使用純html和jquery編寫的方式要簡單得多。

例如：http://jsfiddle.net/wR4Ee/111/

<div id="map"></div> 
<div id="panel"><button id="testButton" class="btn btn-primary">TEST BUTTON</button></div> 

$('#testButton').click(function(){ 
    console.log('click'); 
    map.getView().setZoom(map.getView().getZoom()+1); 
});

來源

2016-09-08 20:19:03 Brain

OpenLayers添加自定義按鈕

回答

相關問題