例－１：ドラッグ＆ドロップされた領域を取得する

マーカーをドラッグ＆ドロップすると、その開始位置の緯度経度、終了地点の緯度経度、中心座標の緯度経度を表示します。
サンプルプログラム
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var line;
    var map;
    var p1,p2;
    var infoTxt="マーカーをドラッグ＆ドロップしてください";
    function load() {
      if (GBrowserIsCompatible()) {

        //地図を作成
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.677335,139.744613), 16);

        //マーカーを作成(国会議事堂)
        var marker = new GMarker(new GLatLng(35.676148,139.74479),{draggable: true});

        GEvent.addListener(marker, "dragstart", function() {
            //マーカーがドラッグを開始した
            p1=marker.getPoint();
        });

        GEvent.addListener(marker, "drag", function() {
            //マーカーがドラッグ中
            p2=marker.getPoint();
            
            //直線の描画
            if(line){map.removeOverlay(line);}
            line = new GPolyline([p1,p2], "#FF0000",10);
            map.addOverlay(line);
            
            infoTxt="開始位置:"+p1+"終了位置:"+p2;
        });

        GEvent.addListener(marker, "dragend", function() {
            //マーカーがドラッグを終了した
            p2=marker.getPoint();
            
            var points=[];
            points.push(p1);
            points.push(new GLatLng(p1.lat(),p2.lng()));
            points.push(p2);
            points.push(new GLatLng(p2.lat(),p1.lng()));
            points.push(p1);

            //直線の描画
            if(line){map.removeOverlay(line);}
            line = new GPolyline(points, "#FF0000", 10);
            map.addOverlay(line);
            
            //中心座標の取得
            var box = new GBounds(points);
            var pnt1=new GLatLng(box.minY,box.minX);
            var pnt2=new GLatLng(box.maxY,box.maxX);
            var bound=new GLatLngBounds(pnt1,pnt2);
            var center=bound.getCenter();

            //結果を吹き出しに表示
            infoTxt+="中心座標:"+center;
            marker.openInfoWindowHtml(infoTxt);
        });

        GEvent.addListener(marker, "click", function() {
            //マーカーがクリックされた
            marker.openInfoWindowHtml(infoTxt);
        });

        //マーカーを地図上に配置
        map.addOverlay(marker);
        
        GEvent.trigger(marker,"click");

      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>
投票数:1 平均点:10.00
この記事の1行目に飛ぶ