マップイベントを処理する

「HERE Maps API for Javascriptの使用を開始する」セクションには、デフォルトの非対話型マップを表示する例が示されています。マップは静止画で、ビューアーはドラッグして別の領域を表示することはできません。また、マウスのクリックやタップには応答しません。最新の Web ブラウザーでサポートされているイベントを使用してマップインタラクションを実装できますが、ソリューションはブラウザー固有のものになるか、非常に複雑になるため、さまざまなブラウジング環境でのテストが必要になります。Maps API for JavaScript は、抽象化レイヤーとして機能し、ブラウザー固有の詳細 (および癖) を隠す events という名前のモジュールを提供することでサポートします。

イベントシステム

この events のモジュール (mapsjs-mapevents.js) は、ラッパーイベントシステム内のさまざまなブラウザーイベントシステムを標準化して、双方向的なクロスブラウザーおよびクロスプラットフォームのアプリケーションを簡単に開発できるようにします。これは Microsoft のポインターイベント仕様で使用される用語を使用し、マウス、タッチ、スタイラスなどの入力デバイスからの明確な抽象化を提供しますが、Microsoft の仕様を実装しているわけではないことに注意してください。

次の表に、eventsモジュールが有効化されたときにマップによって送出されるイベントの概要を示します。

イベント	説明
`pointerdown`	ポインター (マウス、スタイラス、タッチ) がマップの表面またはマップオブジェクトに到達したことを示します。イベントタイプ`mousedown`、`touchstart`、`pointerdown`
`pointerup`	ポインター (マウス、スタイラス、タッチ) がマップの表面またはマップオブジェクトから移動したことを示します。イベントタイプ`mouseup`、`touchend`、`pointerup`
`pointermove`	ポインター (マウス、スタイラス、タッチ) がマップの表面またはマップオブジェクトを横切るように移動することを示します。イベントタイプ`mousemove`、`touchmove`、`pointermove`
`pointerenter`	ポインター (マウス、スタイラス、タッチ) がマップオブジェクト領域に入ったことを示します。イベントタイプ`mouseenter`、`touchenter`、`pointerenter`
`pointerleave`	ポインター (マウス、スタイラス、タッチ) がマップオブジェクト領域から移動したことを示します。イベントタイプ`mouseleave`、`touchleave`、`pointerleave`
`pointercancel`	進行中のポインター (マウス、スタイラス、タッチ) アクションがブラウザーによってキャンセルされたことを示します。イベントタイプ`touchcancel`、`pointercancel`
`dragstart`	マップまたはマップオブジェクトで、ポインター (マウス、スタイラス、タッチ) のドラッグ操作が開始したことを示します
`drag`	マップまたはマップオブジェクトで、ポインター (マウス、スタイラス、タッチ) のドラッグ操作が進行中であることを示します
`dragend`	マップまたはマップオブジェクトで、ポインター (マウス、スタイラス、タッチ) のドラッグ操作が完了したことを示します
`tap`	ポインター (マウス、スタイラス、タッチ) がマップの表面またはマップオブジェクトに短時間触れたことを示します。イベントタイプ`click`、`tap`
`dbltap`	同じポインターを持つ2つのタップイベントが短時間に連続して実行されたことを示します
`longpress`	ポインターターゲットで`pointerdown`イベントが発生し、`pointerup`がトリガーされず、ポインターがより長い期間その場所にとどまったことを示します

イベント処理が可能なマップ

マップイベントを認識し、イベントに応答できるようにするには、次の手順を実行します。

mapsjs-mapevents.js モジュールを読み込みます。
マップオブジェクトを作成します。
MapEvents クラスをインスタンス化します。
マップにイベントリスナーを追加します。

次のコードは、イベントモジュールを読み込む方法を示しています。

<!DOCTYPE html>
	<html>
	<head>
	...
	<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
	<script src="https://js.api.here.com/v3/3.2/mapsjs-core.js"
	   type="text/javascript" charset="utf-8"></script>
	<script src="https://js.api.here.com/v3/3.2/mapsjs-service.js"
	   type="text/javascript" charset="utf-8"></script>
	<script src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"
	   type="text/javascript" charset="utf-8"></script>
	...
	</head>

以下のコードブロックは、マップオブジェクトの作成から始まり、H.mapevents.MapEvents のインスタンス化、最後にタップイベントのリスナーをマップに追加する残りの手順を示しています。リスナーは単にブラウザーの JavaScript コンソールにイベントプロパティを記録します。

// Initialize the map: 
const map = new H.Map(...);

// Enable the event system on the map instance:
const mapEvents = new H.mapevents.MapEvents(map);

// Add event listener:
map.addEventListener('tap', function(evt) {
    // Log 'tap' and 'mouse' events:
    console.log(evt.type, evt.currentPointer.type); 
});

ポインターイベントの構造

通常のブラウザーイベントと同様に、ポインターイベントはその type プロパティによって識別されます。また、送出されたオブジェクト target と、それらをトリガーにした元のイベント (プロパティ originalEvent) も公開します。

さらにポインターイベントには、次のポインター詳細が含まれます。

現在画面にあるポインター (マウス、スタイラス、タッチ)
現在のイベントの結果として変更されたポインター
(イベントの) ターゲットにあるポインター
現在のイベントをトリガーしたポインター

アプリがマウス入力とタッチ入力を区別する必要がある場合、ポインターオブジェクトごとに入力メソッドを指定するタイププロパティが提供されることにご注意ください。

イベント伝播

イベントシステムはイベントの伝播をサポートしています。イベントを送出する各マップオブジェクトは、オブジェクトレイヤーを通してそれらのイベントを伝播します。これは、たとえば、マップオブジェクトとの対話が発生すると、マップにアタッチされたイベントリスナーがトリガーされ、イベントのターゲットがマップオブジェクトを正しく指すことを意味します。

デフォルトのマップ動作を有効化する

Maps API の mapevents モジュールは、パン、ズーム、ピンチズームなどのマップの操作を完全にサポートしています。この実装はクラス H.mapevents.Behavior 内にあり、イベントシステムの抽象化を使用します。

マップインタラクションを有効にするには、最後の例にコードをもう 1 行追加するだけで簡単に実現できます。

// Initialize the map:
const map = new H.Map(...);

// Enable the event system on the map instance:
const mapEvents = new H.mapevents.MapEvents(map);

// Add event listeners:
map.addEventListener('tap', function(evt) {
    // Log 'tap' and 'mouse' events:
    console.log(evt.type, evt.currentPointer.type);
});

// Instantiate the default behavior, providing the mapEvents object:
const behavior = new H.mapevents.Behavior(mapEvents);

上記のコードを使用すると、マップがマウス、スタイラス、タッチ入力に反応するようになります。

静的マップを有効化する

ユースケースで必要な場合、マップを静的にすることができます。次のコード行を削除すると、パン、ズーム、ドラッグなどの操作が無効になり、マップが静的になります。

// Remove or comment out the following line of code to make a map static:
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

イベント システム