Googleマップ API

KeyDragZoomを使って、Google Maps(グーグルマップ)上に矩形(Rectangle)を描く方法

2021年8月27日 by single コメントはまだありません

KeyDragZoomについては、「KeyDragZoomを使って、Google Maps（グーグルマップ）にドラッグズームコントロールを追加する方法」と「KeyDragZoomを使って、Google Maps（グーグルマップ）にドラッグズームコントロールを追加する方法（その２）」も合わせてご覧ください。

KeyDragZoomを使って、Google Maps(グーグルマップ)上に矩形(Rectangle)を描く方法

サンプル

altキーを押すか、ドラッグズームアイコンをクリックして、エリアを選択してください。

HTMLコード 

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Sample Map</title>
   <script
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)" >
   </script>
   <script type="text/javascript" src="/assets/keydragzoom/keydragzoom.js"></script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:70%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      var rectangle;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         var mapOptions = {
           zoom: 15,
           center: myLatlng,
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         map.enableKeyDragZoom({
           visualEnabled: true,
           visualPosition: google.maps.ControlPosition.TOP_CENTER,
           visualSprite: "https://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png",
           key: "alt",
           noZoom:true,
           visualTips: {
            off: "描画する",
            on: "描画をやめる"
           }
         });
         var dz = map.getDragZoomObject();
         // 矩形描画モードへ
         google.maps.event.addListener(dz, 'activate', function () {
            document.getElementById('msg').innerHTML ="";
            log('KeyDragZoom Activated');
            if ( rectangle != undefined ) { 
                 rectangle.setMap(null);
            }
         });
         // 矩形描画モード終了
         google.maps.event.addListener(dz, 'deactivate', function (bnds) {
            if ( rectangle != undefined ) { 
               rectangle.setMap(map);
            }
            log('KeyDragZoom Deactivated: ' + bnds);
         });
         // ドラッグ開始
         google.maps.event.addListener(dz, 'dragstart', function (latlng) {
            log('KeyDragZoom Started: ' + latlng);
         });
         // ドラッグ中
         google.maps.event.addListener(dz, 'drag', function (startPt, endPt, prj) {
            log('KeyDragZoom Dragging: ' + startPt + endPt);
         });
         // ドラッグ終了
         google.maps.event.addListener(dz, 'dragend', function (bnds) {
            log('KeyDragZoom Ended: ' + bnds);
            rectangle = new google.maps.Rectangle({
               strokeColor: "#FF0000",
               strokeOpacity: 0.8,
               strokeWeight: 3,
               fillColor: "#FF0000",
               fillOpacity: 0.25,
               map: map,
               bounds: bnds
            });
          });
        }
        function log(msg) {
          document.getElementById('msg').innerHTML += "<br />" + msg;
        }
   </script>
</head>
<body onload="initMap()">
   <div id="map_canvas"></div>
   <div id="msg" style="height:30%;overflow-y:auto;"></div>
</body>
</html>

デモ

手順

描画モードへ

まず、ドラッグズームコントロールをクリックするか、altキーを押して、描画モードにしてください。

エリアを選択

次にエリアを選択すると、矩形（Rectangle）を描画することができます。

KeyDragZoomイベント一覧

「KeyDragZoom」オブジェクトにはイベントを設定し、イベント時の処理を書き込むことができます。

activate

ドラッグズームコントロールをクリックしたり、altキーなどkeyで指定された操作が実行された場合、エリアを選択する前の最初のイベントが「activate」になります。

activateイベント時の引数

引数（なし）

イベント実行時、取得できる情報はありません。

deactivate

エリア選択モードが終了した時に呼び出されるのが「deactivate」イベントになります。

deactivateイベント時の引数

第１引数選択エリアの南西と北東の位置情報を保持する「LatLngBounds」型オブジェクト

dragstart

ドラッグが始まったときに呼び出されるのが「dragstart」イベントになります。

dragstartイベント時の引数

第１引数 ドラッグ開始時の位置を保持する「LatLng」型の位オブジェクト

drag

ドラッグ中、繰り返し呼び出されるのが「drag」になります。

取得できる情報は、位置情報ではなくて、マップ上の座標（Point）になります。

dragイベント時の引数

第１引数ドラッグ中、生成中の矩形の南西位置の座標を保持した「Point」型のオブジェクト
第２引数ドラッグ中、生成中の矩形の北東位置の座標を保持した「Point」型のオブジェクト
第３引数Point型からLatLng型へ変換するためなどに利用できる「MapCanvasProjection」型のオブジェクト

dragend

ドラッグ終了後に呼び出されるのが「dragend」になります。

dragendイベント時の引数

第１引数 描画された矩形の南西と北東の位置情報を保持する「LatLngBounds」型オブジェクト

KeyDragZoomを使って、矩形(Rectangle)を描く方法

「dragend」時に『Rectangle』を生成する

         // ドラッグ終了
         google.maps.event.addListener(dz, 'dragend', function (bnds) {
            log('KeyDragZoom Ended: ' + bnds);
            rectangle = new google.maps.Rectangle({
               strokeColor: "#FF0000",
               strokeOpacity: 0.8,
               strokeWeight: 3,
               fillColor: "#FF0000",
               fillOpacity: 0.25,
               map: map,
               bounds: bnds
            });
          });
        }

「dragend」イベントで、「LatLngBounds」型のオブジェクトを取得できるので、それをRectangleクラスのオプション「bounds」にしていするだけで、描画した矩形をマップ上に描画させることができます。

簡単ですよね。

ぜひ、ご参考ください。

ご参考

関連ページ