マップイベント
[ 利用開始 ] セクションには、デフォルトの非対話型マップを表示する例が示されています。 マップは静止画で、ビューアーはドラッグして別の領域を表示することはできません。また、マウスのクリックやタップには応答しません。 最新の Web ブラウザでサポートされているイベントを使用してマップ インタラクションを実装できますが、ソリューションはブラウザ固有のものになるか、非常に複雑になるため、さまざまなブラウジング環境でのテストが必要になります。Maps API for JavaScript は、抽象化レイヤーとして機能し、ブラウザー固有の詳細 (および癖) を隠す events
という名前のモジュールを提供することでサポートします。
イベントシステム
このevents
のモジュール (mapsjs-mapevents.js
)は、ラッパーイベントシステム内のさまざまなブラウザイベントシステムを標準化して、インタラクティブなクロスブラウザおよびクロスプラットフォームのアプリケーションを簡単に開発できるようにします。 これは Microsoft のポインタ イベント仕様で使用される用語を利用し、マウス、タッチ、スタイラスなどの入力デバイスからの明確な抽象化を提供しますが、Microsoftの仕様を実装しているわけではないことに注意してください。
次の表に、モジュールevents
が有効化されたときにマップによって送出されるイベントの概要を示します。
Maps API for JavaScript のイベント イベント | 説明 |
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 つの TAP イベントが短時間連続して実行されたことを示します |
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.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
type="text/javascript" charset="utf-8"></script>
...
</head>
以下のコード ブロックは、マップ オブジェクトの作成から始まり、H.mapevents.MapEvents
のインスタンス化、最後にタップ イベントのリスナーをマップに追加する残りの手順を示しています。リスナーは単にブラウザの JavaScript コンソールにイベント プロパティを記録します。
var map = new H.Map(...);
var mapEvents = new H.mapevents.MapEvents(map);
map.addEventListener('tap', function(evt) {
console.log(evt.type, evt.currentPointer.type);
});
pointer イベントの構造体
通常のブラウザーイベントと同様 に、ポインターイベントはそのプロパティによって識別されます。 type
また、送出されたオブジェクトtarget
と、それらをトリガーにした元のイベント(プロパティ originalEvent
)も公開します。
さらに、 pointer イベントには、次の詳細なポインタが含まれています。
- 現在画面に表示されているポインター ( マウス、スタイラス、またはタッチ )
- 現在のイベントの結果変更されたポインタ
- ( event ) ターゲットにあるポインタ
- 現在のイベントをトリガーにしたポインター
アプリケーションでマウス入力とタッチ入力を区別する必要がある場合、各ポインタオブジェクトには、入力メソッドを指定する type プロパティが提供されます。
イベントの伝播
イベントシステムはイベントの伝播をサポートしています。 イベントを送出する各マップ オブジェクトは、オブジェクトレイヤーを通してそれらのイベントを伝播します。 これは、たとえば、マップ オブジェクトとの対話が発生すると、マップにアタッチされたイベント リスナーがトリガーされ、イベントのターゲットがマップ オブジェクトを正しく指すことを意味します。
デフォルトのマップ動作の有効化
Maps API モジュール mapevents
では、パン、ズーム、ピンチズームなどのマップの操作を完全にサポートしています。この実装はクラスH.mapevents.Behavior
内にあり 、イベントシステムの抽象化を利用します。
マップ インタラクションを有効にするには、最後の例にコードをもう 1 行追加するだけで簡単に実現できます。
var map = new H.Map(...);
var mapEvents = new H.mapevents.MapEvents(map);
map.addEventListener('tap', function(evt) {
console.log(evt.type, evt.currentPointer.type);
});
var behavior = new H.mapevents.Behavior(mapEvents);
上記のコードを使用すると、マップがマウス、スタイラス、およびタッチ入力に反応するようになります。
静的マップの有効化
ユースケース で必要に応じて、マップを静的にすることができます。 次のコード行を削除すると、パン、ズーム、ドラッグなどの操作が無効になり、マップが静的になります。
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));