GMap2クラスのマウスイベント

広告

地図上でマウスを動かした時に発生するイベントについて確認します。

マウスが地図の中に入ってきた時のイベント

mouseoverイベントは地図の外から地図の上にマウスが移動してきた際に発生します。 

mouseover(latlng:GLatLng)

このイベントは、ユーザーが地図の外から地図上にマウスを移動すると発生します。

mouseoverイベントが発生した時、イベントハンドラには地図の外から地図に入った時の座標が渡されます。

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

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

GEvent.addListener(map, "mouseover", mouseoverAction);

function mouseoverAction(latlng){
  ....
}

マウスが地図の外に出た時のイベント

mouseoutイベント地図上から地図の外にマウスが移動した際に発生するイベントです。 

mouseout(latlng:GLatLng)

このイベントは、ユーザーがマウスを地図の外に移動すると発生します。

mouseoutイベントが発生した時、イベントハンドラには地図から地図の外へ出た時の座標が渡されます。

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

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

GEvent.addListener(map, "mouseout", mouseoutAction);

function mouseoutAction(latlng){
  ....
}

マウスが移動する時に発生するイベント

地図上でマウスを動かしている間発生するmousemoveイベントについて確認します。 

mousemove(latlng:GLatLng)

このイベントは、ユーザーがマウスを地図上で移動すると発生します。

mousemoveイベントが発生した時、イベントハンドラには地図上の座標が渡されます。

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

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

GEvent.addListener(map, "mousemove", mousemoveAction);

function mousemoveAction(latlng){
  ....
}

サンプルプログラム

では試してみます。

code5_1.js 

var map;
var ctrl;

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

    ctrl = null;

    GEvent.addListener(map, "mouseover", mouseoverAction);
    GEvent.addListener(map, "mouseout", mouseoutAction);
    GEvent.addListener(map, "mousemove", mousemoveAction);
  }
}

function mouseoverAction(latlng){
  if (ctrl == null){
    ctrl = new GLargeMapControl();
    map.addControl(ctrl);
  }
}

function mouseoutAction(latlng){
  if (ctrl != null){
    map.removeControl(ctrl);
    ctrl = null;
  }
}

function mousemoveAction(latlng){
  document.getElementById("lat").value = latlng.lat();
  document.getElementById("lng").value = latlng.lng();
}

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/code5_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>

    <form>
    <p>
    LAT <input type="text" id="lat" size="25" value="" />
    LNG <input type="text" id="lng" size="25" value="" />
    </p>
    </form>
  </body>
</html>

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

p5-1

マウスが地図内に入ってくるとコントロールが表示されます。

p5-2

マウスが地図の外に出るとコントロールが削除されます。

p5-3

マウスが地図の中で移動すると、地図下のテキストボックスにその時のマウスの座標が表示されます。

p5-4

( Written by Tatsuo Ikura )