Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
FlutterでGoogle Mapsを触ってみた - potatotips #76
idonuntius
November 17, 2021
Programming
1
540
FlutterでGoogle Mapsを触ってみた - potatotips #76
idonuntius
November 17, 2021
Tweet
Share
More Decks by idonuntius
See All by idonuntius
Appleの標準アプリで使われている半モーダルビューについて
ikustan
0
370
iOSのUXについて考えてみた
ikustan
0
86
Human Interface Guidelinesを参考にApp Storeを見てみた
ikustan
0
340
Other Decks in Programming
See All in Programming
MLOps勉強会_リアルタイムトラフィックのサーバレスMLOps基盤_20220810
strsaito
1
460
ふんわり理解するcontext
rukiadia
1
180
OSS貢献を気軽にしたい Let's Go Talk #1
yuyaabo
2
240
Agile Tech EXPO_2022/カケハシ
kakehashi
0
110
読みやすいコード クラスメソッド 2022 年度新卒研修
januswel
0
2.9k
Computer Vision Seminar 1/コンピュータビジョンセミナーvol.1 OpenCV活用
fixstars
0
180
企業内スモールデータでのデータ解析
hamage9
0
920
Web Componentsを作れる デザインツールの開発
seanchas116
0
150
パスワードに関する最近の動向
kenchan0130
1
340
Rust on Lambda 大きめCSV生成
atsuyokota
1
400
Automating Gradle benchmarks at N26
ubiratansoares
PRO
2
150
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
120
Featured
See All Featured
Optimizing for Happiness
mojombo
364
64k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
316
19k
Thoughts on Productivity
jonyablonski
44
2.4k
Statistics for Hackers
jakevdp
782
210k
Building Your Own Lightsaber
phodgson
95
4.7k
GraphQLとの向き合い方2022年版
quramy
16
8.5k
Clear Off the Table
cherdarchuk
79
290k
The Power of CSS Pseudo Elements
geoffreycrofte
47
4k
Done Done
chrislema
174
14k
KATA
mclloyd
7
8.9k
The Language of Interfaces
destraynor
148
21k
Designing for humans not robots
tammielis
242
24k
Transcript
FlutterでGoogle Mapsを 触ってみた potatotips #82 いどぬん / Natsuki Idota
自己紹介 • 名前 いどぬん / Natsuki Idota • 会社 株式会社Mobility
Technologies / Flutter • サービス Twitter: @idonuntius Github: idonuntius
本題 サンプルは下記URL https://github.com/idonuntius/GoogleMapsExample_Flutter
紹介 1. マップ 2. マーカー 3. ポリライン
紹介 4. ポリゴン 5. サークル
導入方法(1. APIの取得) 1. https://mapsplatform.google.com/ にアクセスし、「Get started」をクリック 2. 必要事項を入力 3. 「自分のAPIキー」をコピー
導入方法(2. Flutter側の設定) pubspec.yamlのdependenciesにgoogle_maps_flutterを追加
導入方法(3. iOS側の設定) AppDelegate.swiftを開き 1. 「import GoogleMaps」を追加 2. 「GMSServices.provideAPIKey(APIKey)」を追加 1 2
導入方法(4. Android側の設定) AndroidManifest.xmlを開き、「com.google.android.geo.API_KEY」を追加
使用方法(最速実装)
使用方法(GoogleMapクラスの主なオプション) オプション 説明 デフォルト値 initialCameraPosition マップのカメラの初期位置 onMapCreated マップが使用可能な状態になったとき(生成時)のコールバックメソッド mapType マップの種類
MapType.normal scrollGesturesEnabled スクロールジェスチャーに反応するかどうかを指定 true onCameraMove ドラッグやピンチのジェスチャ操作など状態変更時に発生。 地図(カメラ)の中心の緯度と 経度を取得 markers 地図上に配置するマーカー polylines 地図上に表示するポリライン polygons 地図上に表示するポリゴン circles 地図上に表示するサークル
使用方法(GoogleMapの主なオプション) オプション 説明 デフォルト値 initialCameraPosition マップのカメラの初期位置 onMapCreated マップが使用可能な状態になったとき(生成時)のコールバックメソッド mapType マップの種類
MapType.normal scrollGesturesEnabled スクロールジェスチャーに反応するかどうかを指定 true onCameraMove ドラッグやピンチのジェスチャ操作など状態変更時に発生。 地図(カメラ)の中心の緯度と 経度を取得 markers 地図上に配置するマーカー polylines 地図上に表示するポリライン polygons 地図上に表示するポリゴン circles 地図上に表示するサークル
マップの種類(MapType) 1. none 2. normal 3. satellite (衛生) 4. terrain
(地形) 5. hibrid (衛星画像+ラベル/ オーバーレイ)
マーカーの表示
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 マーカーのタップイベントを受け取るためのコールバック 他にもドラックイベントを受け取るためのコールバックなどがあります
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 マーカーのタップイベントを受け取るためのコールバック 他にもドラックイベントを受け取るためのコールバックなどがあります
マーカーのアイコン 1. 色の変更 「hubBlue」以外にもさまざまな色が定義されています。 また「defaultMarkerWithHue」には0~360の値を指定 できるので自分の好きな色に変更ができます。
マーカーのアイコン 2. 画像に変更 1. pubspec.yamlにリソースを追加 2. 画像の設定
マーカーのアイコン 2. 画像に変更 1. pubspec.yamlにリソースを追加 2. 画像の設定 ローカルの画像を取得するための 「fromAssetImage」メソッドが Future<BitmapDescriptor>型のた
め「FutureBuilder」を使用する
マーカーのアイコン 2. 画像に変更 1. pubspec.yamlにリソースを追加 2. 画像の設定 取得した画像を設定
マーカーのアイコン 2. 画像に変更
マーカーの情報ウィンドウ その他にも「anchor」や「onTap」の オプションがあります。
ポリライン
ポリライン
ポリライン マップ生成時にカメラを移動させて、 ポリライン全体を表示させることも可能
Polylineクラスの主なオプション オプション 説明 デフォルト値 polylineId ポリラインID points ポリラインの座標。LatLngのListで指定 <LatLng>[] patterns
ポリラインのストロークパターン <PatternItem>[] color ポリラインの色 Colors.black width ポリラインの幅 10 onTap タップイベントを受け取るためのコールバック
Polylineクラスの主なオプション オプション 説明 デフォルト値 polylineId ポリラインID points ポリラインの座標。LatLngのListで指定 <LatLng>[] patterns
ポリラインのストロークパターン <PatternItem>[] color ポリラインの色 Colors.black width ポリラインの幅 10 onTap タップイベントを受け取るためのコールバック
ポリラインのパターン
ポリラインのパターン 但し、Androidでしか使えません。 iOSはissue化されており、まだ実装中みたいです。 https://github.com/flutter/flutter/issues/60083
応用 1. マーカー + Timer 2. マーカー + ポリライン
まとめ • FlutterのGoogle Mapsではマーカーやポリラインなどを使って色々な表示ができそ う • またそれらを組み合わせることで様々な用途に使えそう
ありがとうございました