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

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