Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FlutterでGoogle Mapsを触ってみた - potatotips #76

idonuntius
November 17, 2021

FlutterでGoogle Mapsを触ってみた - potatotips #76

idonuntius

November 17, 2021
Tweet

More Decks by idonuntius

Other Decks in Programming

Transcript

  1. FlutterでGoogle Mapsを
    触ってみた
    potatotips #82
    いどぬん / Natsuki Idota

    View Slide

  2. 自己紹介
    ● 名前
    いどぬん / Natsuki Idota
    ● 会社
    株式会社Mobility Technologies / Flutter
    ● サービス
    Twitter: @idonuntius
    Github: idonuntius

    View Slide

  3. 本題
    サンプルは下記URL
    https://github.com/idonuntius/GoogleMapsExample_Flutter

    View Slide

  4. 紹介
    1. マップ 2. マーカー 3. ポリライン

    View Slide

  5. 紹介
    4. ポリゴン 5. サークル

    View Slide

  6. 導入方法(1. APIの取得)
    1. https://mapsplatform.google.com/
    にアクセスし、「Get started」をクリック
    2. 必要事項を入力
    3. 「自分のAPIキー」をコピー

    View Slide

  7. 導入方法(2. Flutter側の設定)
    pubspec.yamlのdependenciesにgoogle_maps_flutterを追加

    View Slide

  8. 導入方法(3. iOS側の設定)
    AppDelegate.swiftを開き
    1. 「import GoogleMaps」を追加
    2. 「GMSServices.provideAPIKey(APIKey)」を追加
    1
    2

    View Slide

  9. 導入方法(4. Android側の設定)
    AndroidManifest.xmlを開き、「com.google.android.geo.API_KEY」を追加

    View Slide

  10. 使用方法(最速実装)

    View Slide

  11. 使用方法(GoogleMapクラスの主なオプション)
    オプション 説明 デフォルト値
    initialCameraPosition マップのカメラの初期位置
    onMapCreated マップが使用可能な状態になったとき(生成時)のコールバックメソッド
    mapType マップの種類 MapType.normal
    scrollGesturesEnabled スクロールジェスチャーに反応するかどうかを指定 true
    onCameraMove ドラッグやピンチのジェスチャ操作など状態変更時に発生。
    地図(カメラ)の中心の緯度と
    経度を取得
    markers 地図上に配置するマーカー
    polylines 地図上に表示するポリライン
    polygons 地図上に表示するポリゴン
    circles 地図上に表示するサークル

    View Slide

  12. 使用方法(GoogleMapの主なオプション)
    オプション 説明 デフォルト値
    initialCameraPosition マップのカメラの初期位置
    onMapCreated マップが使用可能な状態になったとき(生成時)のコールバックメソッド
    mapType マップの種類 MapType.normal
    scrollGesturesEnabled スクロールジェスチャーに反応するかどうかを指定 true
    onCameraMove ドラッグやピンチのジェスチャ操作など状態変更時に発生。
    地図(カメラ)の中心の緯度と
    経度を取得
    markers 地図上に配置するマーカー
    polylines 地図上に表示するポリライン
    polygons 地図上に表示するポリゴン
    circles 地図上に表示するサークル

    View Slide

  13. マップの種類(MapType)
    1. none 2. normal 3. satellite
    (衛生)
    4. terrain
    (地形)
    5. hibrid
    (衛星画像+ラベル/
    オーバーレイ)

    View Slide

  14. マーカーの表示

    View Slide

  15. Markerクラスの主なオプション
    オプション 説明 デフォルト値
    markerId マーカーID
    position マーカーの位置。LatLngで指定 LatLng(0.0, 0.0)
    icon マーカーのアイコン BitmapDescriptor.defaultMarker
    infoWindow タップ時に表示される情報ウィンドウ InfoWindow.noText
    anchor マーカーのpositionに配置されるiconの位置
    (0.0, 0.0)の場合は画像の左上、
    (1.0, 1.0)の場合は画像の右下
    Offset(0.5, 1.0)
    rotation マーカーの回転 0.0
    onTap マーカーのタップイベントを受け取るためのコールバック
    他にもドラックイベントを受け取るためのコールバックなどがあります

    View Slide

  16. Markerクラスの主なオプション
    オプション 説明 デフォルト値
    markerId マーカーID
    position マーカーの位置。LatLngで指定 LatLng(0.0, 0.0)
    icon マーカーのアイコン BitmapDescriptor.defaultMarker
    infoWindow タップ時に表示される情報ウィンドウ InfoWindow.noText
    anchor マーカーのpositionに配置されるiconの位置
    (0.0, 0.0)の場合は画像の左上、
    (1.0, 1.0)の場合は画像の右下
    Offset(0.5, 1.0)
    rotation マーカーの回転 0.0
    onTap マーカーのタップイベントを受け取るためのコールバック
    他にもドラックイベントを受け取るためのコールバックなどがあります

    View Slide

  17. マーカーのアイコン
    1. 色の変更
    「hubBlue」以外にもさまざまな色が定義されています。
    また「defaultMarkerWithHue」には0~360の値を指定
    できるので自分の好きな色に変更ができます。

    View Slide

  18. マーカーのアイコン
    2. 画像に変更
    1. pubspec.yamlにリソースを追加 2. 画像の設定

    View Slide

  19. マーカーのアイコン
    2. 画像に変更
    1. pubspec.yamlにリソースを追加 2. 画像の設定
    ローカルの画像を取得するための
    「fromAssetImage」メソッドが
    Future型のた
    め「FutureBuilder」を使用する

    View Slide

  20. マーカーのアイコン
    2. 画像に変更
    1. pubspec.yamlにリソースを追加 2. 画像の設定
    取得した画像を設定

    View Slide

  21. マーカーのアイコン
    2. 画像に変更

    View Slide

  22. マーカーの情報ウィンドウ
    その他にも「anchor」や「onTap」の
    オプションがあります。

    View Slide

  23. ポリライン

    View Slide

  24. ポリライン

    View Slide

  25. ポリライン
    マップ生成時にカメラを移動させて、
    ポリライン全体を表示させることも可能

    View Slide

  26. Polylineクラスの主なオプション
    オプション 説明 デフォルト値
    polylineId ポリラインID
    points ポリラインの座標。LatLngのListで指定 []
    patterns ポリラインのストロークパターン []
    color ポリラインの色 Colors.black
    width ポリラインの幅 10
    onTap タップイベントを受け取るためのコールバック

    View Slide

  27. Polylineクラスの主なオプション
    オプション 説明 デフォルト値
    polylineId ポリラインID
    points ポリラインの座標。LatLngのListで指定 []
    patterns ポリラインのストロークパターン []
    color ポリラインの色 Colors.black
    width ポリラインの幅 10
    onTap タップイベントを受け取るためのコールバック

    View Slide

  28. ポリラインのパターン

    View Slide

  29. ポリラインのパターン
    但し、Androidでしか使えません。
    iOSはissue化されており、まだ実装中みたいです。
    https://github.com/flutter/flutter/issues/60083

    View Slide

  30. 応用
    1. マーカー + Timer 2. マーカー + ポリライン

    View Slide

  31. まとめ
    ● FlutterのGoogle Mapsではマーカーやポリラインなどを使って色々な表示ができそ

    ● またそれらを組み合わせることで様々な用途に使えそう

    View Slide

  32. ありがとうございました

    View Slide