Flutter Google Mapの表示方法を変更してみよう

2021-05-20

はじめに

前回記事でGoogle MapをFlutterから呼び出すコードを作って遊んでいました。地図の種類や、地図上の表示する場所、拡大縮小等値を具体的に変えたらどうなるかを見ていきましょう。

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を呼び出す際に様々なパラメータがあます。 それぞれ値を変えた際の振る舞いを確認しました。 せっかくなので次回はピンでも指してみようかと思います。