イベントを制御する¶
概要¶
本スクリプトでは、地図・アイコン・吹き出しなど地図上に配置されるオブジェクトに対して、ユーザー操作を起点としたイベントを実行することができます。この特徴を活かせば、アイコンをクリックすると吹き出しを表示するというような操作が可能になります。また、登録したイベントを削除することもできるので、操作に対するきめ細かなフィードバックが可能になります。
本章では、以下の内容を解説します。
イベントを関連付けられるオブジェクトの一覧¶
各オブジェクトには、イベントを関連付けられるユーザー操作が予め定義されています。イベントを関連付けられるのは、以下のオブジェクトです。それぞれの「イベント」という項目に、これから紹介するfunctionの脱着に利用するイベント名の全てが記載されています。
オブジェクトにイベントを関連付ける¶
<サンプルコード>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントサンプル</title>
<script charset="UTF-8" src="https://{HOST}/{CID}/v1/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
<script>
function init() {
//新大久保
// 緯度・経度にdegree形式を利用する場合は必ず、シングルコーテーションで囲む
// 通常はmillisec形式を推奨
var map = new navitime.geo.Map('map', new navitime.geo.LatLng('35.701777', '139.69923'), 14);
var clickFunc = function() {
alert('クリック');
}
navitime.geo.util.addListener(map, 'click', clickFunc);
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:500px; width:800px"></div>
</body>
</html>
|
navitime.geo.util.addListener() メソッドを使って、clickイベント時にダイアログを出すという処理を関連付けることで特定の状態で特定のイベントを起こすことができます。
Hint
navitime.geo.util.addListenerOnce() メソッドを使用すると、一度だけイベントを実行するよう指定することができます。
オブジェクトからイベントを削除する¶
オブジェクトに関連付けられたイベント削除は、登録したイベントを指定して削除することで実現できます。
<サンプルコード>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベント削除サンプル</title>
<script charset="UTF-8" src="https://{HOST}/{CID}/v1/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
<script>
function init() {
//新大久保
// 緯度・経度にdegree形式を利用する場合は必ず、シングルコーテーションで囲む
// 通常はmillisec形式を推奨
var map = new navitime.geo.Map('map', new navitime.geo.LatLng('35.701777', '139.69923'), 14);
var clickFunc = function() {
alert('クリックイベント');
}
//戻り値が削除キーになる
deleteKey = navitime.geo.util.addListener(map, 'click', clickFunc);
}
function stopClick () {
navitime.geo.util.removeListener(deleteKey);
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:500px; width:800px"></div>
<input type="button" value="地図のクリック時イベントを削除する" onclick="stopClick()"/>
</body>
</html>
|
イベントを削除するためには、 navitime.geo.util.removeListener() を使用してください。例では、初期表示時は地図上をクリックするとダイアログが表示されますが、ボタンを押すとダイアログを表示させるイベントが削除されます。 navitime.geo.util.removeListener() で該当イベントを削除するためには、登録時に発行される EventListener(API) オブジェクトを削除キーとして渡してください。
詳しくは util(API) を参照してください。
オブジェクトに関連付けられたイベントを実行する¶
<サンプルコード>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>triggerサンプル</title>
<script charset="UTF-8" src="https://{HOST}/{CID}/v1/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
<script>
var map;
function init() {
//新大久保
// 緯度・経度にdegree形式を利用する場合は必ず、シングルコーテーションで囲む
// 通常はmillisec形式を推奨
map = new navitime.geo.Map('map', new navitime.geo.LatLng('35.701777', '139.69923'), 14);
var zoomendFunc = function() {
alert('ズーム終了イベント');
}
navitime.geo.util.addListener(map, 'zoomend', zoomendFunc);
}
function triggerZoomend() {
navitime.geo.util.trigger(map, 'zoomend');
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:500px; width:800px"></div>
<input type="button" value="地図に触れずにズーム終了時のイベントを実行する" onclick="triggerZoomend()"/>
</body>
</html>
|
本来 zoomFunc は map に関連付けられたズーム処理のイベントハンドラなのでズーム終了時に自動で実行されるのですが、 navitime.geo.util.trigger() メソッドを使用すると任意のタイミングで呼び出すことができます。ボタンをクリックすると、ズーム終了時に呼び出されるはずの zoomFunc が呼び出されます。
DOMにイベントを関連付ける¶
<サンプルコード>
<html lang="ja">
<html>
<head>
<meta charset="UTF-8">
<title>DOMイベントサンプル</title>
<script charset="UTF-8" src ="https://{HOST}/{CID}/v1/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
<script>
var clickFunc = function() {
alert('クリック');
}
function init() {
var dom = document.getElementById('dom_sample');
navitime.geo.util.addDomListener(dom, 'click', clickFunc);
}
</script>
</head>
<body onload="init()">
<div id="dom_sample" style="height:200px; width:200px; background-color:grey; text-align:center; color:white;"></div>
<br/>
↑クリックしてください
</body>
</html>
|
本スクリプトでDOMイベントに対してイベントを関連付ける事ができます。ブラウザ依存(Webkitの addEventListner() やIEの attatchEvent のような())を排除してDOMに対するイベントハンドリングを行うことができます。例では、灰色のエリアに click というイベント名で関連付けたダイアログを表示するようにしています。 jQuery における $(dom).click(function(){…}) や $(dom).bind(‘click’, function(){…}) と同様のメソッドです。
なお、第２引数であるイベント名に使える名前は、W3Cで定められた命名に沿って指定してください。