如何通过按键转到当前位置？

Question

我正在制作一个移动应用程序（flutter），并且已经添加了一个mapbox地图并在地图上显示了当前位置。如何添加一个按钮，单击后会将您带到当前位置？我在手机上启动该程序时也遇到问题，安装按钮在手机上可见，但单击它时没有任何反应。 如果您愿意，我可以显示我的 Mapbox 访问令牌和网址。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text('MapBox')),
        body: new FlutterMap(
          options: new MapOptions(
              initialCenter: new LatLng(56.946285, 24.105078),
              minZoom: 6,
              maxZoom: 20),
          children: [
            TileLayer(
              urlTemplate:
                  'url',
              // userAgentPackageName: 'com.example.app',
              additionalOptions: {
                'accessToken':
                    'token'
              },
            ),
            RichAttributionWidget(
              attributions: [
                TextSourceAttribution(
                  'OpenStreetMap contributors',
                  onTap: () => launchUrl(
                      Uri.parse('https://openstreetmap.org/copyright')),
                ),
              ],
            ),
            CurrentLocationLayer(
              followOnLocationUpdate: FollowOnLocationUpdate.always,
              turnOnHeadingUpdate: TurnOnHeadingUpdate.never,
              style: LocationMarkerStyle(
                marker: const DefaultLocationMarker(
                  // color: Colors.blue,
                  child: Icon(
                    Icons.navigation,
                    color: Colors.white,
                  ),
                ),
                markerSize: const Size(40, 40),
                markerDirection: MarkerDirection.heading,
              ),
            )
          ],
        ));
  }
}

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^6.0.1
  geolocator: ^10.1.0
  latlong2: ^0.9.0
  location: ^5.0.3
  url_launcher: ^6.2.1
  flutter_map_location_marker: ^8.0.2

添加一个按钮，单击该按钮会将您带到当前位置。

Answer 1

要移动到当前位置，您需要使用MapController。

MapController mapController = MapController();

然后将此控制器分配给Flutter Map的mapController参数。

然后使用地理定位器获取用户的当前位置，然后使用mapController 导航到该位置。

          onPressed: () {
              Geolocator.getCurrentPosition(
                      desiredAccuracy: LocationAccuracy.high)
                  .then((pickedCurrentLocation) {
                setState(() {
                  currentLocation = pickedCurrentLocation;
                });
                mapController.move(
                    LatLng(currentLocation.latitude,
                        currentLocation.longitude),
                    6);
              });
            }

这应该将用户移动到当前位置。

完整代码示例如下：

class _MyHomePageState extends State<MyHomePage> {
  var currentLocation;

  MapController mapController = MapController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('MapBox')),
        body: FlutterMap(
          mapController: mapController,
          options: const MapOptions(
              initialCenter: LatLng(56.946285, 24.105078),
              minZoom: 6,
              maxZoom: 20),
          children: [
            TileLayer(
              urlTemplate:
                  'url',
              // userAgentPackageName: 'com.example.app',
              additionalOptions: {
                'accessToken':
                    'token'
              },
            ),
            RichAttributionWidget(
              attributions: [
                TextSourceAttribution(
                  'OpenStreetMap contributors',
                  onTap: () => launchUrl(
                      Uri.parse('https://openstreetmap.org/copyright')),
                ),
              ],
            ),
            CurrentLocationLayer(
              // followOnLocationUpdate: FollowOnLocationUpdate.always,
              turnOnHeadingUpdate: TurnOnHeadingUpdate.never,
              style: const LocationMarkerStyle(
                marker: DefaultLocationMarker(
                  // color: Colors.blue,
                  child: Icon(
                    Icons.navigation,
                    color: Colors.white,
                  ),
                ),
                markerSize: Size(40, 40),
                markerDirection: MarkerDirection.heading,
              ),
            ),
            TextButton(
                child: Text("Go home"),
                onPressed: () {
                  Geolocator.getCurrentPosition(
                          desiredAccuracy: LocationAccuracy.high)
                      .then((pickedCurrentLocation) {
                    setState(() {
                      currentLocation = pickedCurrentLocation;
                    });
                    mapController.move(
                        LatLng(currentLocation.latitude,
                            currentLocation.longitude),
                        6);
                  });
                })
          ],
        ));
  }
}

希望这有帮助！