5

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

2 に答える 2

2

私は 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-08T20:19:03.167 に答える