GMap2クラスのクリックイベント

広告

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

マウスの左クリック

地図上でマウスの左ボタンをクリックした時に発生するclickイベントについて確認します。 

click(overlay:GOverlay, latlng:GLatLng, overlaylatlng:GLatLng)

このイベントは、ユーザーがマウスで地図をクリックすると発行されます。
click イベントは、クリックのコンテキストと、クリック可能なオーバーレイで
クリックが行われたかどうかに基づいて別の引数を渡します。クリック可能な
オーバーレイでクリックが行われないと、overlay 引数は null で、latlng 引
数にはクリックされた点の地域の経度と緯度が含まれます。ユーザーが、
clickable であるオーバーレイ (GMarker、GPolygon、GPolyline、GInfoWindow 
など) をクリックした場合、overlay 引数はオーバーレイ オブジェクトを含み、
これに対して overlaylatlng 引数はクリックされたオーバーレイの緯度と経度
を含みます。さらに、click イベントもオーバーレイ自体で発行されます。

clickイベントが発生した時、イベントハンドラには3つの引数が渡されます。地図上に表示されたオーバーレイではなく地図の上でclickイベントが発生した場合、overlayはnull、latlngにはクリックされた地点の座標が渡されてきます。地図上のオーバーレイの上でクリックされた場合でもこのイベントは発生しoverlayには対象のオーバーレイオブジェクト、overlaylatlngにはオーバーレイの座標が渡されてきます。

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

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

GEvent.addListener(map, "click", clickAction);

function clickAction(overlay, latlng, overlaylatlng){
  ....
}

マウスの左ダブルクリック

地図上でマウスの左ボタンをダブルクリックした時に発生するdblclickイベントについて確認します。 

dblclick(overlay:GOverlay, latlng:GLatLng)

このイベントは、地図上でダブルクリックすると発生します。マーカーまたはそ
の他のクリック可能なオーバーレイをダブルクリックした場合は、このイベント
は発生しません。ダブルクリックした地点の地理的座標が latlng 引数で渡され
ます。overlay 引数は、常に null に設定されます。

dblclickイベントが発生した時、イベントハンドラには2つの引数が渡されます。overlayは常にnullでありlatlngにはダブルクリックされた地点の座標が渡されてきます。

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

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

GEvent.addListener(map, "dblclick", clickAction);

function clickAction(overlay, latlng){
  ....
}

マウスの右クリック

地図上でマウスの右ボタンをクリックした時に発生するsinglerightclickイベントについて確認します。 

singlerightclick(point:GPoint, src:Element, overlay?:GOverlay)

地図のコンテナで DOM contextmenu イベントが発生すると、このイベントも発
生します。マーカーまたはその他のクリック可能なオーバーレイを右クリックす
ると、オーバーレイが overlay 引数でイベント ハンドラに渡されます。右ク
リックした地点のピクセル座標 (地図を含む DOM 要素内に存在) と DOM イベン
トのソース要素が、point 引数と src 引数でそれぞれ渡されます。マウスの右
ボタンをダブルクリックすると、ダブルクリックによるズームが有効な場合は、
地図がズームアウトして singlerightclick イベントは発生しません。ただし、
ダブルクリックによるズームが無効な場合は、singlerightclick イベントが 2 
つ発生します。

singlerightclickイベントが発生した時、イベントハンドラには3つの引数が渡されます。pointには右クリックされた地点のピクセル座標が含まれます。srcにはイベントの発生元の要素が含まれます。地図上のオーバーレイ上で右クリックが発生した場合は3番目の引数にオーバーレイのオブジェクトが渡されてきます。

座標ではなくピクセル座標を取得する点に注意して下さい。

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

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

GEvent.addListener(map, "singlerightclick", clickAction);

function clickAction(point, src){
  ....
}

サンプルプログラム

では試してみます。

code4_1.js 

var map;
var opt1;
var opt2;
var opt3;

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

    creatMarker();

    GEvent.addListener(map, "click", clickAction);
    GEvent.addListener(map, "dblclick", dblclickAction);
    GEvent.addListener(map, "singlerightclick", rightClickAction);
  }
}

function clickAction(overlay, latlng, overlaylatlng){
  var marker = new GMarker(latlng, opt1);
  map.addOverlay(marker);
}

function dblclickAction(overlay, latlng){
  var marker = new GMarker(latlng, opt2);
  map.addOverlay(marker);
}

function rightClickAction(point, src){
  var latlng = map.fromContainerPixelToLatLng(point);
  var marker = new GMarker(latlng, opt3);
  map.addOverlay(marker);
}

function creatMarker(){
  var markerIcon1 = new GIcon();
  markerIcon1.image = "./img/icon.png";
  markerIcon1.shadow = "./img/shadow.png";
  markerIcon1.iconSize = new GSize(42, 56);
  markerIcon1.shadowSize = new GSize(70, 56);
  markerIcon1.iconAnchor = new GPoint(21, 56);

  var markerIcon2 = new GIcon(markerIcon1, "./img/icon2.png");
  var markerIcon3 = new GIcon(markerIcon1, "./img/icon3.png");

  opt1 = {icon:markerIcon1};
  opt2 = {icon:markerIcon2};
  opt3 = {icon:markerIcon3};
}

map4_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/code4_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を見てみます。

p4-1

今回はマウスの左ボタンのクリック、ダブルクリック、右ボタンのクリックでそれぞれ別のマーカーを画面に表示させるようにしてみました。色々試して見て下さい。

p4-2

( Written by Tatsuo Ikura )