VEMap.AttachEvent メソッド
指定した関数にマップ コントロール イベントを割り当てます。
構文
VEMap.AttachEvent(event, function);
パラメータ
| パラメータ | 説明 |
|---|---|
event |
関数呼び出しを生成するマップ コントロール イベントの名前です。 |
function |
イベントが発生したときに実行する関数です。関数の名前または関数自体を指定できます。 |
戻り値
解説
マップ コントロール イベントの一覧については、「VEMap イベント」を参照してください。
このイベントが発生したときに呼び出す関数を、関数名または関数自体として指定できます。以下に、各オプションの例を示します。
キーボード イベントおよびマウス イベントの場合は、既定のアクションの前にカスタム関数が実行されます。カスタム関数が false を返した場合は、既定のアクションが実行されます。カスタム関数が true を返した場合、既定のアクションは実行されません。たとえば、onLeftMouseDoubleClick イベントをアタッチすると、最初にカスタム関数が実行されます。関数から false が返された場合は、既定のマップ動作である拡大が実行されます。true が返された場合は、拡大動作が無効になります。
イベントに関連付けられているオブジェクトのタイプに基づいてアクションを実行することも可能です。通常、VEShape クラス オブジェクトはイベントに関連付けられています。
注意
関数名だけでなく関数全体をアタッチすることを指定した場合は、それを後でデタッチすることはできません。
詳細については、「VEMap イベント」を参照してください。
例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
var shape = null;
// マサチューセッツ州ボストンのほぼ中央の緯度値と経度値
var lat = 42.3595586931348;
var lon = -71.06094360351562;
// 多角形を描画するためのポイント値
var points=[new VELatLong(lat,lon-0.15),
new VELatLong(lat+0.1,lon-0.05),
new VELatLong(lat+0.1,lon+0.05),
new VELatLong(lat,lon+0.15),
new VELatLong(lat-0.1,lon+0.05),
new VELatLong(lat-0.1,lon-0.05)];
// プッシュピン ポップアップ用のカスタム HTML (バージョン 5 の新機能です)
var description =
"<div>" +
"<h4>ここはボストン (MA) の中央です。</h4>" +
"<p>緯度 = 42.3595586931348.</p>" +
"<p>経度 = -71.06094360351562.</p>" +
"</div>";
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(lat,lon));
map.SetZoomLevel(10);
document.getElementById('banner').innerHTML = document.title;
}
function drawPolygon()
{
map.DeleteAllShapes();
try
{
var shape = new VEShape(VEShapeType.Polygon,points);
shape.SetLineWidth(2);
shape.SetTitle("<div id='customTitle'><h3>独自のタイトル</h3></div>");
shape.SetDescription(description);
shape.SetPoints(points);
shape.ShowIcon();
map.AddShape(shape);
document.getElementById('label').innerHTML =
"<p>多角形をマウスでポイントすると、このシェイプに関する情報が表示されます。</p>"
// shapeInfo 関数を呼び出す onmouseover イベント
map.AttachEvent("onmouseover", shapeInfo);
// shapeInfo 関数を呼び出して情報要素をクリアする onmouseout イベント
map.AttachEvent("onmouseout", shapeInfo);
// callPopUp 関数を呼び出す onclick イベント
map.AttachEvent("onclick", callPopUp);
}
// このサンプルでは、VEException オブジェクトを使用して例外を処理しています。
catch(VEException)
{
document.getElementById('label').innerText =
VEException.message +
" : " +
VEException.name +
" : " +
VEException.source;
}
}
function detach()
{
// すべてのイベントをデタッチします。
map.DetachEvent("onmouseover", shapeInfo);
map.DetachEvent("onmouseout", shapeInfo);
map.DetachEvent("onclick", callPopUp);
}
function shapeInfo(e)
{
if(e.elementID != null)
{
document.getElementById("label").innerText =
"イベント: " +
e.eventName +
"; シェイプ ID: " +
e.elementID +
"\n\n多角形をクリックすると追加情報が表示されます。";
}
else
{
document.getElementById("label").innerText = "";
}
}
function callPopUp(e)
{
if(e.elementID != null)
{
alert(
"他の関数もイベントを利用して呼び出すことができます。\n" +
"このメッセージの表示に利用したイベント: " +
e.eventName);
}
else
{
return false;
}
}
</script>
</head>
<body onload="GetMap();">
<div id="banner" style="background-color:#CCCCFF; border:thin blue dashed; border-bottom:0px;
font-family:Helvetica, sans-serif; font-style:italic; font-size:medium; width:400px">
</div>
<div id="myMap" style="position:relative; width:400px; height:400px; border:thin blue groove">
</div>
<div id="buttons" style="position:static; left:11px; top:401px">
<input name="Button1" type="button"
value="シェイプを描画しイベントをアタッチ" onclick="drawPolygon();" />
<input name="Button2" type="button" value="イベントをデタッチ" onclick="detach();" />
<div id="label" style="position:relative; left:0px; top:0px; width:399px;">
<label id="Label1">
</label>
</div>
</div>
</body>
</html>