FlutterでGoogle Mapのパラメータを変更して遊んでみよう

markdown-img-paste-20210520215445858.webp
目次

はじめに

前回の記事では、FlutterからGoogle Mapを呼び出すアプリを作成しました。 今回の記事では、地図の種類や表示する場所、拡大縮小などのパラメータを変更して、どのように地図が変化するかを見ていきます

FlutterでGoogle Mapを呼び出すアプリを作ってみよう

確認していくパラメータ

  • 地図上で表示する座標変数のパラメータ
  • 表示する地図の種類

地図上で表示する座標変数のパラメータ

初期座標をスカイツリーに変えようと思います。 main.dartのkGooglePlexのLatLngの座標を直値で変更します。

static final CameraPosition _kGooglePlex = CameraPosition(
  target: LatLng(35.710063, 139.8107),
  zoom: 14.4746,
);

CameraPositionには、地図上の座標や、表示する際にどの縮尺で行うかなどを指定できます。 定義はこちらです。それぞれの変数の意味を解説します。

const CameraPosition({
  this.bearing = 0.0,
  required this.target,
  this.tilt = 0.0,
  this.zoom = 0.0,
})  : assert(bearing != null),
      assert(target != null),
      assert(tilt != null),
      assert(zoom != null);

bearing

北を基準にカメラの方位を設定することができます。 時計回りに何度ズラすかを指定できるようです。

0.0で北、90.0で東を指します。 傾きの最大値は、Zoomの値によって変化するようです。

bearing: 15.0000,

0.0を指定した様子

90を指定した様子

スマホから方位取得してこの値に埋め込めばGoogle mapで歩きながら方角に合わせて画面を回すのが実装できそうですね。

target

地図上の座標をLatLng形式で与える。 一般的なGPS座標を与えると良いです。

例えば、大阪の通天閣であればこのように指定できます。 通天閣は皆さんご存だと思いますが、緯度: 34.652499 経度: 135.506306にあります。

target: LatLng(34.652499, 135.506306),

変更すると通天閣が中心に表示されていることが確認できます。

zoom

地図上で指定した座標にどこまで近づけるかを示します。

    zoom: 19.151926040649414);

zoom=3

zoom=10

zoom=20

zoom=30

zoom=60

どこかでZoomできる上限がありそうですね。

tilt

カメラの覗き込みを指定することができます。 値を多くすることで横から見ているかのようにカメラが移動します。

tilt=0.0

tilt=60

建物によっては分かりにくい部分もありますが横から覗き込んでいるように変化していますね。

表示する地図の種類

MapTypeで定義されています。 main.dartではこの部分に刺さっています。 GoogleMapのmapType.**を変更すると表示される画面が変わります。

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: GoogleMap(
+      mapType: MapType.normal,
      initialCameraPosition: _kGooglePlex,
      onMapCreated: (GoogleMapController controller) {
        _controller.complete(controller);
      },
    ),
    floatingActionButton: FloatingActionButton.extended(
      onPressed: _goToTheLake,
      label: Text('To the lake!'),
      icon: Icon(Icons.directions_boat),
    ),
  );
}

MapTypeはこのように定義されている。どのように変化するかを確認する。

enum MapType {
  /// Do not display map tiles.
  none,

  /// Normal tiles (traffic and labels, subtle terrain information).
  normal,

  /// Satellite imaging tiles (aerial photos)
  satellite,

  /// Terrain tiles (indicates type and height of terrain)
  terrain,

  /// Hybrid tiles (satellite images with some labels/overlays)
  hybrid,
}

none

mapType: MapType.none,

normal

mapType: MapType.normal,

satellite

mapType: MapType.satellite,

terrain

mapType: MapType.terrain,

hybrid

mapType: MapType.hybrid,

まとめ

FlutterでGoogle Mapを呼び出す際に様々なパラメータがあります。今回は、それぞれのパラメータを変更して地図の挙動を確認しました。次回は、ピンを指してさらにアプリを充実させていきましょう。

Related Post

> FlutterでGoogle Mapのパラメータを変更して遊んでみよう
FlutterでGoogleマップを表示する方法
> FlutterでGoogle Mapのパラメータを変更して遊んでみよう
Flutter Studioを使ってこなれたUIを作ってみよう。
> FlutterでGoogle Mapのパラメータを変更して遊んでみよう
FlutterでSnakeGameを作ろう Part2
> FlutterでGoogle Mapのパラメータを変更して遊んでみよう
FlutterでSnakeGameを作ろう Part1
> FlutterでGoogle Mapのパラメータを変更して遊んでみよう
Flutterで画面遷移する際に値を渡す方法
> FlutterでGoogle Mapのパラメータを変更して遊んでみよう
Flutterでリストビューにアイコンを追加する方法

おすすめの商品

>