マップイベント

[ 利用開始 ] セクションには、デフォルトの非対話型マップを表示する例が示されています。 マップは静止画で、ビューアーはドラッグして別の領域を表示することはできません。また、マウスのクリックやタップには応答しません。 最新の 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が トリガされず、ポインタがより長い期間その場所に留まっていることを示します

イベント処理を含むマップ

マップイベントを認識し、イベントへの応答を許可するには、次の手順を実行します。

  1. モジュールmapsjs-mapevents.jsのロード 。
  2. マップ オブジェクトの作成
  3. MapEvents クラスのインスタンス化。
  4. イベントリスナーをマップに追加。

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

<!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 コンソールにイベント プロパティを記録します。

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

// Enable the event system on the map instance:
var 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); 
});

pointer イベントの構造体

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

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

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

アプリケーションでマウス入力とタッチ入力を区別する必要がある場合、各ポインタオブジェクトには、入力メソッドを指定する type プロパティが提供されます。

イベントの伝播

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

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

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

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

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

// Enable the event system on the map instance:
var 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:
var behavior = new H.mapevents.Behavior(mapEvents);

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

静的マップの有効化

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

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

「」に一致する結果は 件です

    「」に一致する結果はありません