【Flutter】flutte_mapを使い、画面に地図を表示する方法
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の中のbodyFlutterMapを設定します。

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

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

dart
class _MyMapState extends State<MyMap> {
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> {
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> {
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" />

image2

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

image3

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

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

© 2024あずきぱんウェブスタジオ