dart 如何通过按下按钮转到当前位置？

eufgjt7s 于 2024-01-04 发布在其他

关注(0)|答案(1)|浏览(102)

我正在制作一个移动的应用程序（flutter），已经添加了一个Map框Map，并在Map上显示当前位置。如何添加一个按钮，当点击时，将带你到当前位置？我也有一个问题，在我的手机上启动程序，安装按钮在手机上是可见的，当我点击它时什么也没有发生。如果你愿意，我可以显示我的Map框访问令牌和URL。
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

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

dart

来源：https://stackoverflow.com/questions/77573686/how-to-go-to-current-location-by-pressing-a-button

1条答案

按热度按时间

oknwwptz1#

要移动到当前位置，您需要使用MapController。
第一个月
然后将此控制器指定给Flutter Map的mapController参数。
然后使用geolocator获取用户的当前位置，然后使用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);
                  });
                })
          ],
        ));
  }
}

型
希望这有帮助！

赞(0）回复(0）举报 2024-01-04

我来回答

dart 如何通过按下按钮转到当前位置？

1条答案

相关问题

热门标签

最新问答