ジェスチャーを処理します
はじめにの例からわかるように、マップ ビューでは、ピンチやダブルタップでズームインなど、一般的なすべての地図ジェスチャがデフォルトでサポートされています。 次の表に、使用可能なジェスチャと、マップ上の対応するデフォルトの動作の概要を示します。
| 1 本の指で画面をタップします。 このジェスチャには、定義済みのマップアクションがありません。 |
| 地図を一定の量だけ拡大 するには、 1 本の指で画面を 2 回タップします。 |
| 1 本の指を押して画面に移動します。 このジェスチャには、定義済みのマップアクションがありません。 |
| 地図を移動 するには、 1 本の指を画面に合わせて押し続け、任意の方向に動かします。 指を持ち上げると、地図が少し勢いをつけて動き続けます。 |
| 地図を傾けるに は、 2 本の指を画面に合わせて押し続け、垂直に動かします。 他の方向の動作は事前に定義されていません。 |
| 一定の量だけズームアウトするに は、 2 本の指で画面をタップします。 |
| 連続的にズームインまたはズームアウトする には、 2 本の指を押したまま画面に移動し、その間の距離を増減します。 地図を連続的に回転させるに は、 2 本の指を画面に合わせて押し続け、両方を回転するか、いずれかを動かして、地図の角度を変更します。 |
HERE SDK for Flutter では、次のジェスチャがサポートされています。
- タップ :
TapListener
- ダブルタップ :
DoubleTapListener
- 長押し :
LongPressListener
- パン :
PanListener
- 2 本指でパン :
TwoFingerPanListener
- 2 本指でタップ :
TwoFingerTapListener
- ピンチ回転 :
PinchRotateListener
各リスナーには、ユーザーが検出可能なアクション(特定のジェスチャの開始時や終了時など)を実行するたびに通知する専用のコールバックがあります。 通常は、ジェスチャが検出された後に、マップ マーカーを長押しした後に配置するなど、特定の動作をアプリケーションに追加します。
同じジェスチャには、一度に 1 つのリスナーのみを設定できます。
地図操作を制御します
リスナーを設定しても、ジェスチャのデフォルトのマップ動作には影響がありません。 個別に制御できます。 既定では、マップをダブルタップしたときの拡大など、すべての標準的な動作が有効になっています。
たとえば、次のように、ダブルタップ ( ズームイン ) および 2 本指タップ ( ズームアウト ) のデフォルトのマップジェスチャの動作を無効にできます。
_hereMapController.gestures.disableDefaultAction(GestureType.doubleTap);
_hereMapController.gestures.disableDefaultAction(GestureType.twoFingerTap);
既定のマップアクションを無効にしても、ジェスチャイベントをリッスンできます。 これは、例えば独自のズーム動作を実装するために、ジェスチャのデフォルトのアクションをオフにする場合に役立ちます。 タップと長押しを除くすべてのジェスチャで、デフォルトのマップアクションが提供されます。 詳細については、上の概要を参照してください。
デフォルトのマップジェスチャの動作を戻すには、次のように呼び出します。
_hereMapController.gestures.enableDefaultAction(GestureType.doubleTap);
_hereMapController.gestures.enableDefaultAction(GestureType.twoFingerTap);
ジェスチャーリスナーを添付します
ジェスチャーリスナーをマップ ビューに添付する方法の例を見てみましょう。 マップ ビューでは、各ジェスチャに固有の setter が提供されています。 リスナーを設定するとすぐに、そのジェスチャに関連するすべてのイベントが専用のコールバックを介して受信されます。これは onTap()
、次の場合に該当し TapListener
ます。
void _setTapGestureHandler() {
_hereMapController.gestures.tapListener = TapListener((Point2D touchPoint) {
var geoCoordinates = _toString(_hereMapController.viewToGeoCoordinates(touchPoint));
print('Tap at: $geoCoordinates');
});
}
リスナーを設定するとすぐに、ジェスチャが検出されたことを知らせる通知が届き始めます。
touchPoint
は 、ジェスチャが発生したMapView
座標を指定します。 を呼び出すことで viewToGeoCoordinates(touchPoint)
、ピクセルを地理座標に変換できます ( 上図を参照 ) 。
同様に、リスニングを停止するには、以下の電話番号を使用します。
_hereMapController.gestures.tapListener = null;
連続したジェスチャ ( 長押し、ピンチ、パン、 2 本の指のパンなど ) の場合 begin
、ジェスチャの状態はジェスチャが検出されたことを示します。 指がディスプレイに触れている間に update
、 end
指が持ち上げられたことを示す状態になるか cancel
、ジェスチャ検出がキャンセルされたことを示す状態になるまで、次の状態が発生することがあります。
void _setLongPressGestureHandler() {
_hereMapController.gestures.longPressListener = LongPressListener((GestureState gestureState, Point2D touchPoint) {
var geoCoordinates = _toString(_hereMapController.viewToGeoCoordinates(touchPoint));
if (gestureState == GestureState.begin) {
print('LongPress detected at: $geoCoordinates');
}
if (gestureState == GestureState.update) {
print('LongPress update at: $geoCoordinates');
}
if (gestureState == GestureState.end) {
print('LongPress finger lifted at: $geoCoordinates');
}
if (gestureState == GestureState.cancel) {
print('Map view lost focus. Maybe a modal dialog is shown or the app is sent to background.');
}
});
}
たとえば、長押しのイベントが検出された後も、ユーザーが指を画面に置いたままにしたり、移動したりすることがあります。 ただし begin
、長押しジェスチャが検出された時点でマークされるのはイベントのみです。
地図上にマップ マーカーを配置する場合は、長押しのジェスチャが便利です。 この例について は、 アプリの検索例を参照してください。
連続していないジェスチャ ( タップ、ダブルタップ、 2 本の指タップなど ) の GestureState
場合、ジェスチャイベントを処理するためには必要ありません。
注
パンジェスチャを使用すると、マップをスワイプして移動することがあります。これにより、ジェスチャはすでに終了しており、すべての指が持ち上げられているにもかかわらず、移動が継続されます。 マップの移動がいつ終了したかを検出 MapIdleListener
するには、を使用します。 HereMap
インスタンスに追加 MapView
できます。インスタンスから取得できます。
GitHub では 、 Gestures_app のサンプルアプリの一部としてコードスニペットおよびその他の使用例を利用できます。