ガイド変更履歴HERE SDK API references
ガイド
  1. 開発者ガイド：HERE SDK for Android
  2. コンポーネント
  3. Androidマップ

マップビューを調整する

HERE SDKには、マップビューを変更するさまざまな方法が用意されています。マップ スタイルを使用すると地図の外観を変更できますが、MapCamera 機能を使用すると地図を別の視点で表示できます。

仕組み

HERE SDK を使用すると、ターゲット位置の設定、カメラの傾斜、ズーム インとズーム アウト、方位角の調整など、さまざまな機能を使用できます。

  • mapView.getCamera() によって返された MapCamera を使用して、地図のビューを操作します。
  • camera.lookAt(new GeoCoordinates(52.530932, 13.384915)) を呼び出して、新しいターゲットの位置を設定します。これにより、マップ ビューが新しい位置に即座に切り替わります。
  • mapView.getCamera().getState().targetCoordinates を呼び出して、マップ ビューの現在の中心位置を取得します。
  • 距離をメートル単位で設定して地図をズームします：mapView.getCamera().lookAt(new GeoCoordinates(52.373556, 13.114358), orientation, new MapMeasure(MapMeasure.Kind.DISTANCE_IN_METERS, distanceInMeters))。カメラの State プロパティから現在の距離を取得します。State では現在のズーム レベルも確認できます。
  • GeoOrientationUpdate を設定して、カメラの傾斜角と方位角を指定します。
  • MapCamera.setPrincipalPoint(Point2D) を使用して変換の中心を設定し、マップ ビューの中心にあるデフォルトのピボット ポイントを変更します。
  • camera.getBoundingBox() を呼び出して、現在表示されているエリアの境界を取得します。
  • camera.lookAt(geoBox, new GeoOrientationUpdate(null, null)) を呼び出して、表示するエリアの境界を設定します。null を設定すると、以前の方位と傾斜の値が保持されます。
  • 地図を移動します：MapCameraAnimationFactory を使用して、A から B まで基本的なアニメーションを実行します。オーバーロードされたメソッドの 1 つを使用してアニメーションをカスタマイズします。たとえば、高度なアニメーションには flyTo() を使用します。

デフォルトでは、カメラは地図の中央に配置されます。真上から見た鳥瞰視点から見ると、地図は北が上を向いています。これは、デバイスで上端が地図の北を向いていることを意味します。

カメラの位置を変更する

アニメーションを使用して地図を新しい位置に移動する場合は、MapCameraAnimationFactory の flyTo() メソッドを使用します。新しい地図の位置に即座に切り替える場合は、新しいターゲットを設定することで実行できます。

新しいカメラ ターゲットを設定すると、カメラの位置が変更され、マップ ビューの中心に表示される位置を実際に変更できます。lookAt() メソッドはさまざまなオーバーロードで利用できます。いくつか例を示します。

// Change only the location.
camera.lookAt(new GeoCoordinates(52.530932, 13.384915));

// Change zoom and location.
double distanceInMeters = 1000 * 2;
MapMeasure mapMeasureZoom = new MapMeasure(MapMeasure.Kind.DISTANCE_IN_METERS, distanceInMeters);
camera.lookAt(new GeoCoordinates(52.530932, 13.384915), mapMeasureZoom);

// Change location area and orientation.
GeoBox geoBox = new GeoBox(new GeoCoordinates(52.373556, 13.114358),
                           new GeoCoordinates(52.611022, 13.479493));
double bearingInDegress = 0;
double tiltInDegress = 45;
GeoOrientationUpdate orientation =
        new GeoOrientationUpdate(bearingInDegress, tiltInDegress);
camera.lookAt(geoBox, orientation);
val distanceInMeters = (1000 * 2).toDouble()
val mapMeasureZoom = MapMeasure(MapMeasure.Kind.DISTANCE_IN_METERS, distanceInMeters)
camera.lookAt(GeoCoordinates(52.530932, 13.384915), mapMeasureZoom)


// Change location area and orientation.
val geoBox = GeoBox(
        GeoCoordinates(52.373556, 13.114358),
        GeoCoordinates(52.611022, 13.479493)
)
val bearingInDegress = 0.0
val tiltInDegress = 45.0
val orientation = GeoOrientationUpdate(bearingInDegress, tiltInDegress)
camera.lookAt(geoBox, orientation)

カメラの向き (方位、傾斜) を変更しても、地図の位置は変更されないことに注意してください。

注

HERE SDK は専用のズーム レベル ([0,22] の範囲) もサポートしており、必要な詳細レベルをすばやく達成する方法を提供します。カメラの zoomTo() メソッドを呼び出してズーム レベルを設定し、カメラの State プロパティから現在のズーム レベルにアクセスします。ズームレベルはDoubleとして設定されています。同じDouble型のdistanceInMetersパラメーターと混合しないように注意してください。

カメラを変更すると、マップ ビューの視点をプログラムでのみ変更できますが、地図のズームする、またはマップの回転、傾斜させるジェスチャーの実行など、マップ ビュー自体を直接制御することはできません。地図の直接操作に使用できるジェスチャーの概要については、ジェスチャーのセクションを参照してください。

注

MapCamera は常に定義された State になります。たとえば、State は現在のターゲット位置を提供しています。このターゲット位置は、デフォルトの主点が変更されていない限り、マップ ビューの現在の中心を示します (以下を参照)。

あるいは、特定の位置まで凹状の弓の動きをして移動します。

private void flyTo(GeoCoordinates geoCoordinates) {
    GeoCoordinatesUpdate geoCoordinatesUpdate = new GeoCoordinatesUpdate(geoCoordinates);
    double bowFactor = 1;
    MapCameraAnimation animation =
            MapCameraAnimationFactory.flyTo(geoCoordinatesUpdate, bowFactor, Duration.ofSeconds(3));
    mapCamera.startAnimation(animation);
}
private fun flyTo(geoCoordinates: GeoCoordinates) {
    val geoCoordinatesUpdate = GeoCoordinatesUpdate(geoCoordinates)
    val bowFactor = 1.0
    val animation =  MapCameraAnimationFactory.flyTo(geoCoordinatesUpdate, bowFactor, Duration.ofSeconds(3))
    mapCamera.startAnimation(animation)  
}

カメラを回転する

カメラを使用すると、地図を直接回転させることはできませんが、代わりにカメラの向きを変更できます。GeoOrientationUpdate の bearing パラメーターを変更すると、地図を回転させたときと同じ効果が得られます。

地図の向きは通常、方位角によって指定されます。「方位」とはナビゲーション用語で、方向を北から時計回りに度単位で数えます。

Illustration: Bearing direction.

デフォルトでは、カメラの方位値は 0° です。上の図に示すように、方位角度を 45° に設定すると、カメラの視点からは地図が反時計回りに回転して見え、方位の方向が地図の新しい上方向になりデバイスの上端を向きます。これは、ハイキング中に紙の地図を特定の方向に回転させるのと似ています。地図の上端が自分の行きたい方向を向いていると、方向を確認しやすくなります。しかし、常に真の北方向 (方位 = 0° ) にはなりません。

なお、方位軸は現在のカメラの向きに関係なく常に地面に対して垂直であり、カメラをパススルーします。

次のコードはカメラを 90° 回転させます。

double bearingInDegress = 90;
double tiltInDegress = 0;
GeoOrientationUpdate orientation =
        new GeoOrientationUpdate(bearingInDegress, tiltInDegress);
double distanceInMeters = 1000 * 7;
MapMeasure mapMeasureZoom = new MapMeasure(MapMeasure.Kind.DISTANCE_IN_METERS, distanceInMeters);
mapView.getCamera().lookAt(
        new GeoCoordinates(52.373556, 13.114358), orientation, mapMeasureZoom);
val bearingInDegress = 90.0
val tiltInDegress = 0.0
val orientation = GeoOrientationUpdate(bearingInDegress, tiltInDegress)
val distanceInMeters = (1000 * 7).toDouble()
val mapMeasureZoom = MapMeasure(MapMeasure.Kind.DISTANCE_IN_METERS, distanceInMeters)
mapView.camera.lookAt(GeoCoordinates(52.373556, 13.114358), orientation, mapMeasureZoom)

実際には、これにより、ビューアーから見て地図は左に 90° 回転して表示されます。

カメラを傾斜させる

カメラを使用して、平らな 2D 地図の表面を 3D 視点に変換できます。たとえば、地平線の方向に見える、より遠くにある道路を見ることができます。デフォルトでは、カメラは傾斜していません (傾斜 = 0°)。

カメラの傾斜値に加えて、カメラの方位角 (上を参照) も操作できます。ここでは、傾斜値を変更した場合の効果を示します。下の図を参照して、有効なカメラ軸を確認してください。

傾斜値 0° は、カメラの光軸が地面に対して垂直であることを意味します。傾斜角は常にこの垂直軸から計算されます。傾斜角はカメラの光軸に関係します。

図に示すように、カメラを 45° 傾けるとカメラの鳥瞰視点が 3D 視点に変わります。カメラの傾斜値のみを変更するには、次のコードを使用します。

double bearingInDegress = 0;
double tiltInDegress = 45;
GeoOrientationUpdate orientation = new GeoOrientationUpdate(bearingInDegress, tiltInDegress);
double distanceInMeters = 1000 * 7;
MapMeasure mapMeasureZoom = new MapMeasure(MapMeasure.Kind.DISTANCE_IN_METERS, distanceInMeters);
mapView.getCamera().lookAt(new GeoCoordinates(52.373556, 13.114358), orientation, mapMeasureZoom);
val bearingInDegress = 0.0
val tiltInDegress = 45.0
val orientation = GeoOrientationUpdate(bearingInDegress, tiltInDegress)
val distanceInMeters = (1000 * 7).toDouble()
val mapMeasureZoom = MapMeasure(MapMeasure.Kind.DISTANCE_IN_METERS, distanceInMeters)
mapView.camera.lookAt(GeoCoordinates(52.373556, 13.114358), orientation, mapMeasureZoom)

下の図に示すように、傾斜角はターゲット位置の垂直軸から計算されます。観測者の真下を指す方向は天底と呼ばれます。傾斜値を設定すると、カメラが実際に動いて、カメラのターゲットに焦点を合わせ続けます。

なお、各傾斜値はデルタではなく絶対値として適用されます。これは、それ以降の傾斜値は常にカメラのデフォルトの位置から適用され、前の位置から適用されるわけではないことを意味します。したがって、同じ傾斜値を複数回設定してもカメラの傾斜軸は変わりません。これはほとんどのカメラ操作に共通しています。範囲外の値は指定範囲内に制限されます。

Illustration: Tilt the map.

すべての軸を同時に操作できます。

なお、以下に示すように、カメラが傾いている場合は方位値を変更すると異なる結果が生じます。傾斜しているカメラは方位値を設定すると異なるターゲット位置になりますが、傾斜していないカメラは元のターゲット位置を維持します。

Illustration: The axes of the camera for bearing and tilt.

変換の中心を変更する

デフォルトでは、地図のピボット ポイント (主点) は、マップ ビューの中心に配置されます。これはターゲット座標を配置するマップ ビュー内のポイントを決定します。新しい主点を設定すると地図が即座に移動し、新しい主点で現在のターゲット座標がレンダリングされます。これはマップ ビューの左上の原点 (0, 0) を基準とし、ピクセル単位で相対的に設定されます。

注

主点はすべてのプログラムによる地図の変換 (回転、周回、傾斜、ズーム)、地図を傾斜させるための 2 本指のパン ジェスチャーに影響します。ピンチによる回転などの他のジェスチャーは影響を受けません。

通常、主点は 1 回のみ設定します。たとえば、ターン・バイ・ターンナビ中に変換の中心を少し下げることで、ユーザーには前方の道路がより多く見えるようになります。これを実現するには、マップビューのピクセル寸法 (レイアウトとデバイスの画面サイズに基づく) を取得し、次に高さを3/4下げる、つまり、mapViewHeightInPixelsに0.75を掛ける必要があります。次の例を参照してください。

// Repositions principal point 3/4 lower than default.
double mapViewWidthInPixels = mapView.getWidth();
double mapViewHeightInPixels = mapView.getHeight();
Point2D newTransformCenter = new Point2D(mapViewWidthInPixels / 2, mapViewHeightInPixels * 0.75);
camera.setPrincipalPoint(newTransformCenter);

// Reposition a circle view on screen to indicate the new target.
cameraTargetView.setX((float) newTransformCenter.x - cameraTargetView.getWidth() / 2);
cameraTargetView.setY((float) newTransformCenter.y - cameraTargetView.getHeight() / 2);
// Repositions principal point 3/4 lower than default.
val mapViewWidthInPixels = mapView.width.toDouble()
val mapViewHeightInPixels = mapView.height.toDouble()
val newTransformCenter = Point2D(mapViewWidthInPixels / 2, mapViewHeightInPixels * 0.75)
camera.setPrincipalPoint(newTransformCenter)

// Reposition a circle view on screen to indicate the new target.
cameraTargetView.setX(newTransformCenter.x.toFloat() - cameraTargetView.getWidth() / 2)
cameraTargetView.setY(newTransformCenter.y.toFloat() - cameraTargetView.getHeight() / 2)

上のコード スニペットでは新しい主点を設定し、現在の地図の中心を画面に表示されている地図領域の 3/4 下方に瞬時に移動させます。一度設定すると、その後のすべての地図操作はこの新しい主点を中心に回転します。たとえば、プログラムで地図を回転させると、地図は常にこの主点を中心に回転します。

上の例では、主点を中心としたカスタムのcameraTargetViewをレンダリングする方法も示しています。これの完全なコードは、Cameraサンプルアプリで見ることができます。

HERE SDK for Android Navigateでは、VisualNavigatorを使用する場合はナビゲーターが主点を制御するため、これは当てはまりません。ターン・バイ・ターンナビ中にカスタム主点を使用する場合は、これをマップビューで直接設定するのではなく、CameraBehaviorに設定する必要があります。

FixedCameraBehavior fixedCameraBehavior = new FixedCameraBehavior();
visualNavigator.setCameraBehavior(fixedCameraBehavior);

// Repositions principal point higher than default during navigation.
Anchor2D newTransformCenter = new Anchor2D(0.5, 0.5);
fixedCameraBehavior.setNormalizedPrincipalPoint(newTransformCenter);
val fixedCameraBehavior = FixedCameraBehavior()
visualNavigator.setCameraBehavior(fixedCameraBehavior)

// Repositions principal point higher than default during navigation.
val newTransformCenter = Anchor2D(0.5, 0.5)
fixedCameraBehavior.normalizedPrincipalPoint = newTransformCenter

アニメーションを追加する

より高度なアニメーションの例は、GitHub の [CameraKeyframeTracks](https://github.com/heremaps/here-sdk-examples/tree/master/examples/latest/navigate/android/Java/CameraKeyframeTracks) サンプル アプリで見ることができます。

Route または GeoBox にズームする方法の例を探している場合は、こちらのルート検索のセクションを参照してください。これは、アニメーションの有無 (任意のパディングも含む) にかかわらず実行できます。

ジェスチャーとカメラ動作をカスタマイズする

デフォルトでは、マップビューは地図を操作することによってカメラを動かせる、複数のジェスチャーをサポートしています。たとえば、2本指のジェスチャーを使用して地図をピンチしたり回転したりできます。それぞれのジェスチャーによりcameraのプロパティを調整します。デフォルトの動作をカスタマイズする場合は、サポートされているGestureTypeアクションのいずれかを無効にして、独自のカメラ操作を定義できます。

これはジェスチャーのカスタマイズを使用して行うころができます。「カスタムズーム動作を追加する」を参照してください。

Cameraサンプルアプリを試す

上記のコードスニペットのほとんどは、「Camera」サンプルアプリ (Java版およびKotlin版) で利用できます。このサンプルアプリはGitHubにあります。

7 日前の更新

EN 日本語

HERE documentation

Find answers to your product and technical questions

Documentation

What's new

Videos

HERE SDK Licenses Explained
HERE SDK Licenses Explained
HERE Style Editor - new feature 'Modifiers'
HERE Style Editor - new feature 'Modifiers'
HERE Platform Coding Assistant
HERE Platform Coding Assistant
How Gabb Wireless improves kids' safety with maps - HERE Technologies
How Gabb Wireless improves kids' safety with maps - HERE Technologies
Kardinal last-mile optimization engine and HERE Matrix Routing - HERE Technologies
Kardinal last-mile optimization engine and HERE Matrix Routing - HERE Technologies
Build weather-enabled apps with HERE Technologies
Build weather-enabled apps with HERE Technologies
Getting Started with HERE APIs - HERE Technologies
Getting Started with HERE APIs - HERE Technologies
Not All Routes Are Truck-Friendly – HERE Truck Routing
Not All Routes Are Truck-Friendly – HERE Truck Routing
How to animate the look-at point with HERE Maps API for JS
How to animate the look-at point with HERE Maps API for JS
Introduction to HERE Geocoding and Search
Introduction to HERE Geocoding and Search
Introduction to HERE Routing
Introduction to HERE Routing
EN 日本語

HERE ドキュメント

製品や技術に関する質問の答えを見つけましょう。より多くの内容と最新の情報については、英語版をご覧ください。

ドキュメント

ダイナミックマップ

動的コンテンツ関連のAPIをアプリやサービスに活用して、ドライバーが安全・快適かつ予定どおりに目的地へ到着できるよう支援します。

HERE Traffic API HERE Map Attributes

地図とデータ

世界中を走行する多数のマッピング車両から得られる最新の位置情報データを活用し、精度の高い地図やカスタムレイヤーを構築できます。

HERE Traffic Vector Tile API HERE Indoor Map

最新情報

動画

HERE SDKのライセンスについて
HERE SDKのライセンスについて
HERE Style Editor - 新機能「Modifiers」
HERE Style Editor - 新機能「Modifiers」
HEREプラットフォームのコーディングアシスタント
HEREプラットフォームのコーディングアシスタント
Gabb Wirelessが地図を活用して子どもの安全を向上させる方法 - HERE Technologies
Gabb Wirelessが地図を活用して子どもの安全を向上させる方法 - HERE Technologies
Kardinalのラストマイル最適化エンジンとHERE Matrix Routing - HERE Technologies
Kardinalのラストマイル最適化エンジンとHERE Matrix Routing - HERE Technologies
天気対応アプリを開発する
天気対応アプリを開発する
HERE APIのはじめ方 - HERE Technologies
HERE APIのはじめ方 - HERE Technologies
トラックに最適なルートを見つる方法 – HERE Truck Routing
トラックに最適なルートを見つる方法 – HERE Truck Routing
HERE Maps API for JSで注視点をアニメーションさせる方法
HERE Maps API for JSで注視点をアニメーションさせる方法
HERE Geocoding and Search入門
HERE Geocoding and Search入門
HERE Routing入門
HERE Routing入門
(function () { const input = document.querySelector('input[data-typeahead]'); if (!input) return; // Prevent the form from submitting/navigating input.closest('form')?.addEventListener('submit', e => e.preventDefault()); input.addEventListener('input', function () { const q = this.value.trim().toLowerCase(); document.querySelectorAll('.nav-group-name').forEach(group => { let anyVisible = false; group.querySelectorAll('.nav-group-task').forEach(task => { const text = task.textContent.trim().toLowerCase(); const show = !q || text.includes(q); task.style.display = show ? '' : 'none'; if (show) anyVisible = true; }); // Hide the whole group header if nothing matches group.style.display = anyVisible || !q ? '' : 'none'; }); }); })(); (function () { function onTokenClick(event) { var link = event.target.closest('.sdk-for-ios .item .token'); if (!link) return; event.preventDefault(); console.log('token clicked', link.textContent.trim()); var item = link.closest('.item'); if (!item) return; var content = item.querySelector('.height-container'); if (!content) { console.log('no .height-container found for item', item); return; } var isHidden = window.getComputedStyle(content).display === 'none'; content.style.display = isHidden ? 'block' : 'none'; link.classList.toggle('token-open', isHidden); var href = link.getAttribute('href'); if (href) { if (history.pushState) history.pushState({}, '', href); else location.hash = href; } } function openHashTarget() { var hash = window.location.hash.slice(1); if (!hash) return; var anchor = document.querySelector('.sdk-for-ios a[name="' + hash + '"]'); if (!anchor) return; var item = anchor.closest('.item'); if (!item) return; var link = item.querySelector('.token'); var content = item.querySelector('.height-container'); if (!link || !content) return; content.style.display = 'block'; link.classList.add('token-open'); } function init() { console.log('HERE SDK accordion init'); openHashTarget(); } document.removeEventListener('click', onTokenClick); document.addEventListener('click', onTokenClick); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.addEventListener('hashchange', openHashTarget); window.addEventListener('pageLoad', init); })();