Dies ist ein Blogartikel, der Funktionen für die Entwicklung von Karten-Apps mit Flutter in einer Serie vorstellt.In mobilen Karten-Apps ist die Funktion, die Karte mit dem aktuellen Standort des Geräts zu verknüpfen, eine häufig diskutierte Funktion. In diesem Artikel wird gezeigt, wie man diese Funktion mit dem für Flutter verfügbaren Karten-SDK (ArcGIS Maps SDK for Flutter) implementiert.
Der Beispielcode ist auf GitHub veröffentlicht. Wenn Sie ihn sofort ansehen möchten, laden Sie ihn bitte herunter. Die Ausführung der App ist in README beschrieben. Um das Beispiel auszuführen, benötigen Sie einen API Schlüssel (kostenlos).
Wie man das Karten-SDK einführt und die Karte anzeigt, erfahren Sie im Blogartikel „Flutter で地図アプリを作成してみよう！“. In diesem Artikel liegt der Fokus auf der Funktion zur Anzeige der Karte in Verbindung mit dem aktuellen Standort.
Hinzufügen von Berechtigungen
Um in der Anwendung auf die Standortinformationen des Geräts zuzugreifen, müssen folgende Berechtigungen hinzugefügt werden. Fügen Sie die jeweiligen Berechtigungen in die entsprechenden Dateien ein.
Android
android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
iOS
ios/Runner/Info.plist
<key>NSLocatS_FINE_LOCATION" />ionUsageDescription</key>
<string>Um auf Standortinformationen zuzugreifen, benötigt die App Ihre Erlaubnis zur Nutzung der Standortdaten.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Um auf Standortinformationen zuzugreifen, benötigt die App Ihre Erlaubnis zur Nutzung der Standortdaten.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Um auf Standortinformationen zuzugreifen, benötigt die App Ihre Erlaubnis zur Nutzung der Standortdaten.</string>
Der Text im string-Tag von Info.plist wird dem Benutzer angezeigt, wenn er um Erlaubnis für den Zugriff auf Standortdaten gebeten wird. Bitte geben Sie eine beliebige Nachricht ein.
Implementierung der Anzeige des aktuellen Standorts
Die Funktion zur Anzeige des aktuellen Standorts auf der Karte verwendet die Klasse LocationDisplay
start メソッドを呼び出します。
// 位置情報の取得を開始します（これにより、ユーザーに許可を求めるプロンプトが表示されます）。
try {
await _mapViewController.locationDisplay.dataSource.start();
} on ArcGISException catch (e) {
if (mounted) {
showDialog(
context: context,
builder: (_) => AlertDialog(content: Text(e.message)),
);
}
}
非同期に関するエラーが発生したら、_onMapViewReady 関数に async を付けて、下記のように変更します。
Future<void> _onMapViewReady() async {
これで、デバイスが現在地を取得できる場合に、現在地を示す青いシンボルがマップの中心に表示されるはずです。
4. 続いて、位置情報の取得の開始/停止と AutoPanMode を切り替える UI を実装します。まず、これらの UI を含む locationSettings ウィジェットを作成します。
Widget locationSettings(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(
20.0,
20.0,
20.0,
max(
20.0,
View.of(context).viewPadding.bottom / View.of(context).devicePixelRatio,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Text(
'表示設定',
style: Theme.of(context).textTheme.titleLarge,
),
const Spacer(),
],
),
Row(
children: [
const Text('ロケーションの表示'),
const Spacer(),
// 位置情報の取得を開始および停止するためのスイッチです。
Switch(
value: _isLocationStarted,
onChanged: (value) {
setState(() {
if (_mapViewController.locationDisplay.dataSource.status == LocationDataSourceStatus.started) {
_mapViewController.locationDisplay.stop();
_isLocationStarted = false;
} else {
_mapViewController.locationDisplay.start();
_isLocationStarted = true;
}
});
},
),
],
),
Row(
children: [
const Text('Auto-Pan モード'),
const Spacer(),
// AutoPanMode を選択するためのドロップダウン ボタンです。
DropdownButton(
value: _mapViewController.locationDisplay.autoPanMode,
onChanged: (value) {
setState(() {
_mapViewController.locationDisplay.autoPanMode = value!;
});
},
items: const [
DropdownMenuItem(
value: LocationDisplayAutoPanMode.off,
child: Text('Off'), // 現在位置のシンボルをマップ上に表示するのみ
),
DropdownMenuItem(
value: LocationDisplayAutoPanMode.recenter,
child: Text('Neu zentrieren'), // Zoomt die Karte so, dass der aktuelle Standort im Zentrum ist
),
DropdownMenuItem(
value: LocationDisplayAutoPanMode.navigation,
child: Text(
'Navigation'), // Zeigt den aktuellen Standort immer am unteren Rand der Karte an und dreht die Karte entsprechend der Fahrtrichtung des Geräts
),
DropdownMenuItem(
value: LocationDisplayAutoPanMode.compassNavigation,
child: Text(
'Compass'), // Zeigt den aktuellen Standort immer im Zentrum der Karte an und dreht die Karte entsprechend der Ausrichtung des Geräts
),
],
),
],
),
],
),
);
}
5. Fügen Sie das zuvor erstellte locationSettings-Widget zum Expanded mit ArcGISMapView hinzu.
children: [
Expanded(
// Fügen Sie die MapView dem Widget-Baum hinzu und setzen Sie den Controller.
child: ArcGISMapView(
controllerProvider: () => _mapViewController,
onMapViewReady: _onMapViewReady,
),
),
// Fügen Sie unterhalb des Kartenbildschirms das locationSettings-Widget hinzu.
locationSettings(context),
],
6. Erstellen Sie am Anfang der Klasse _MyHomePageState die Variable _isLocationStarted zur Statusüberprüfung von LocationDisplay. Im locationSettings-Widget wird der Schalter „Standort anzeigen“ eingeschaltet, wenn LocationDisplay gestartet (start) wird, und ausgeschaltet, wenn LocationDisplay gestoppt (stop) wird.
bool _isLocationStarted = true;
7. Öffnen Sie abschließend lib/main.dart und fügen Sie nach den bereits vorhandenen Importzeilen den folgenden Code hinzu, um die benötigten Pakete zu importieren.
import 'dart:math';
Damit ist die UI zum Starten/Stoppen der Standorterfassung und Umschalten des AutoPanMode fertig. Starten Sie die App und testen Sie das Umschalten der AutoPanMode-Modi, um deren Verhalten zu überprüfen.
Zusammenfassung
In diesem Artikel haben wir eine Funktion implementiert, die die Karte in Verbindung mit dem aktuellen Standort des Geräts anzeigt. Die LocationDisplay-Klasse ermöglicht auch Einstellungen, die hier nicht vorgestellt wurden, wie das Ändern des Standortsymbols, den Kartenmaßstab beim ersten Anzeigen des Standorts oder die Anzeigeposition im Navigationsmodus. Passen Sie diese gerne an Ihren eigenen Stil an und probieren Sie es aus.
Verwandte Links
