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

2021-05-20

アプリ開発

はじめに

前回の記事では、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,
}