Flutter

【Flutter】flutte_mapを使い、画面に地図を表示する方法

作成日：2022年04月07日

更新日：2022年04月08日

Flutter のパッケージである、flutte_mapを使い、画面に地図を表示します。

まずは、flutte_mapをインストールするために、ターミナルで、flutter pub add flutter_mapを実行します。

また、経度と緯度を計算するために LatLong を使用します。

ターミナルで、flutter pub add latlongを実行します。

さらにターミナルでflutter pub getを実行しましょう。

dart ファイルに移動し、flutter_map と latlong をインポートします。

dart
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart' as latLng;

Scaffoldの中のbodyにFlutterMapを設定します。

optionsで、どの位置の地図を表示するか、表示サイズ、最大最小表示サイズを指定します。

長崎市の経度と緯度は、32.74472, 129.87361 なので、こちらを使用します。

dart
class _MyMapState extends State<MyMap> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlutterMap(
        options: MapOptions(
          center: latLng.LatLng(32.74472, 129.87361),
          zoom: 16.0,
          maxZoom: 17.0,
          minZoom: 3.0,
        ),
      ),
    );
  }
}

どの地図を使用するかは、layersの中にTileLayerOptionsを設定します。

今回は、flutter_mapの readme の例に書かれている URL を使用します。

dart
class _MyMapState extends State<MyMap> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlutterMap(
        options: MapOptions(
          center: latLng.LatLng(32.74472, 129.87361),
          zoom: 16.0,
          maxZoom: 17.0,
          minZoom: 3.0,
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c'],
            retinaMode: true,
          ),
        ],
      ),
    );
  }
}

特定の地図の場所にピンを刺すには、layersの中にMarkerLayerOptionsを設定します。

markers に Marker を設定し、経度緯度とアイコンを設定します。

dart
class _MyMapState extends State<MyMap> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlutterMap(
        options: MapOptions(
          center: latLng.LatLng(32.74472, 129.87361),
          zoom: 16.0,
          maxZoom: 17.0,
          minZoom: 3.0,
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c'],
            retinaMode: true,
          ),
          MarkerLayerOptions(
            markers: [
              Marker(
                point: latLng.LatLng(32.74472, 129.87361),
                builder: (ctx) => const Icon(
                  Icons.location_pin,
                  color: Colors.redAccent,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

また、Android の場合、/android/app/src/main/AndroidManifest.xml に以下のコードを追加する必要があります。

dart
<uses-permission android:name="android.permission.INTERNET" />

では、動作確認しましょう。

無事、画面に地図を表示することができました。

見えにくいのですが、中央にピンのアイコンが表示されています。

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

【Flutter】flutte_mapを使い、画面に地図を表示する方法

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する