GMap2クラスのドラッグイベント

広告

地図上で地図をドラッグして動かした時に発生するイベントについて確認します。

地図をドラッグの開始時と終了時に発生するイベント

dragstartイベントは地図のドラッグを開始した時に発生します。 

dragstart()

このイベントは、ユーザーが地図のドラッグを開始すると発生します。

dragstartイベントが発生した時、イベントハンドラに渡されてくる引数はありません。

dragendイベントは地図のドラッグを終了した時に発生します。 

dragend()

このイベントは、ユーザーが地図のドラッグを開始すると発生します。

dragendイベントが発生した時、イベントハンドラに渡されてくる引数はありません。

実際には次のように記述します。 

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);

GEvent.addListener(map, "dragstart", dragstartAction);
GEvent.addListener(map, "dragend", dragendAction);

function dragstartAction(){
  ....
}

function dragendAction(){
  ....
}

地図をドラッグ中に発生するイベント

dragイベントは地図をドラッグ中に繰り返し発生するイベントです。 

drag()

このイベントは、ユーザーが地図をドラッグしている間に繰り返し発生します。

dragイベントが発生した時、イベントハンドラに渡されてくる引数はありません。

実際には次のように記述します。 

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);

GEvent.addListener(map, "drag", dragAction);

function dragAction(){
  ....
}

サンプルプログラム

では試してみます。

code6_1.js 

var map;
var startPoint;
var soverlay;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.676856,139.77356), 14);

    GEvent.addListener(map, "dragstart", dragstartAction);
    GEvent.addListener(map, "dragend", dragendAction);
    GEvent.addListener(map, "drag", dragAction);
  }
}

function dragstartAction(){
  startPoint = map.getCenter();
  var marker = new GMarker(startPoint);
  map.addOverlay(marker);

  var screenXY = new GScreenPoint(0.5, 0.5, "fraction", "fraction");
  var overlayXY = new GScreenPoint(0.5, 0.5, "fraction", "fraction");
  var size = new GScreenSize(101, 101);

  soverlay = new GScreenOverlay("./img/cross.png", screenXY, overlayXY, size);
  map.addOverlay(soverlay);
}

function dragendAction(){
  var endPoint = map.getCenter();
  var marker = new GMarker(endPoint);
  map.addOverlay(marker);

  var polyline = [];
  polyline.push(new GPoint(startPoint.lng(), startPoint.lat()));
  polyline.push(new GPoint(endPoint.lng(), endPoint.lat()));
  var line = new GPolyline(polyline);
  map.addOverlay(line);

  map.removeOverlay(soverlay);
}

function dragAction(){
  var nowPoint = map.getCenter();

  var points = [];
  points.push(startPoint);
  points.push(nowPoint);
  var line = new GPolyline(points);
  map.addOverlay(line);

  startPoint = nowPoint;
}

map5_1.html 

<!DOCTYPE html "-//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>サンプル：GMap2クラスのドラッグイベント</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code6_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p6-1

地図のドラッグを始めると、その時点での地図の中心点にマーカーを設置します。

p6-2

マウスをドラッグ中は中心点に十字の画像を表示し、順に線を引いていきます。

p6-3

ドラッグが終了すると十字の画像を消去し、その時点での地図の中心点にマーカーを設置します。

p6-4

( Written by Tatsuo Ikura )