メインコンテンツまでスキップ

地図表示

概要​

地図表示を検証するデモページです。

このページのソースコードはこちらです。

検証できること​

表示領域の変更​

表示位置と表示範囲を変更できます。

  • latitude: 緯度
  • longitude: 経度
  • latitudeDelta: 緯度範囲（縦幅）
  • longitudeDelta: 経度範囲（横幅）

地図の表示領域内にlatitudeDeltaとlongitudeDeltaで指定した範囲の両方が収まるように地図が表示されます。

地図の種類選択​

地図の見た目を変更できます。

  • MapType: 地図タイプ
    • standard: 道路地図
    • satellite: 航空写真
    • hybrid: 航空写真に道路地図を重ねたもの
  • showBuildings: 建物の輪郭を表示

showBuildingsの設定値（true/false）で建物の輪郭表示の切り替えができたのは、iOSのバージョン15以下だけです。

以下にエミュレータ・シミュレータでOSのバージョンごとに検証した結果を示します。

Android​

バージョン建物の輪郭
13.0showBuildingsの設定値に関わらず常に表示する
12.0showBuildingsの設定値に関わらず常に表示する
11.0showBuildingsの設定値に関わらず常に表示する

iOS​

バージョン建物の輪郭
16.2showBuildingsの設定値に関わらず常に表示する
15.4showBuildingsの設定値を反映する
14.5showBuildingsの設定値を反映する

画面操作の制限​

以下の画面操作を制限できます。

  • scrollEnabled: スクロールを許可
  • zoomEnabled: 拡大縮小を許可
  • rotateEnabled: 回転を許可
  • pitchEnabled: 視点の角度変更を許可

マーカーの追加​

以下の項目に値を指定しマーカーを追加できます。

  • latitude: 緯度
  • longitude: 経度
  • title: タイトル
  • description: 説明
  • draggable: ドラックアンドドロップによる位置変更を許可

タイトルと説明を両方入力しなかった場合、タップしてもコールアウトは表示されません。

使用したマップSDK​

地図表示のためにreact-native-mapsを使用します。

react-native-mapsで使用できるマップSDKは以下になります。

ただし、iOSではGoogle Mapsの使用に制限があります。 詳細は、iOSでGoogle Mapsを使用するときの注意点を参照してください。

そのため、このアプリではiOSはMapKit、AndroidはGoogle Mapsを使用した地図表示のみ対応しています。

AndroidでGoogle Mapsを使用する場合に必要な設定​

Google Maps APIを使用するためのAPIキーが必要になります。 Google Mapsを使用する場合は、以下を参考にAPIキーを取得してください。

取得したAPIキーを、~/.gradle/gradle.propertiesに設定します。

SANTOKU_APP_GOOGLE_MAP_API_KEY=[取得したAPIキー]

iOSでGoogle Mapsを使用するときの注意点​

このアプリで作成している地図表示の共通部品（MapView）ではiOSでGoogle Mapsを使うことはできない仕様になっています。 iOSでGoogle Mapsを使用する場合、共通部品は使用せずreact-native-mapsからコンポーネントをインポートしてください。 さらに、設定ファイルの変更が必要になります。

以下を参考にAPIキーを取得してください。

app.config.jsに取得したAPIキーを追記してください。

/app.config.js
module.exports = ({config}) => {
  const environment = process.env.ENVIRONMENT ?? 'prod';
  const defaultAppConfig = {
    /* ～省略～ */
    ios: {
      /* ～省略～ */
+     config: {
+       googleMapsApiKey: '<Your API Key>',
      }
    },
/* ～省略～ */

このアプリではFirebaseを使用しているため、useFrameworksで静的リンクを明示的に指定しています。

しかしreact-native-mapsの1.3.2はuseFrameworksに対応していません。 iOSでGoogle Mapsを使用する設定でビルドしたとき依存関係にあるファイルが見つからないというエラーが発生します。

そのため、このアプリではiOSでGoogle Mapsを表示できない仕様としています。

なお、react-native-mapsの1.6.0からは、useFrameworksの静的リンクに対応しているようです。

地図表示のイメージ​

iOSAndroid
ios-mapandroid-map
に最終更新