flutter_map插件不会更新当前位置

问题描述 投票:0回答:1

我正在使用flutter_map插件,但是即使位置的纬度和经度可以正常工作(它们返回当前位置),地图也不会更新到当前位置,这是代码:(主文件只是重定向到此屏幕,项目中没有其他文件)

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
import 'package:location/location.dart';

final accessToken =
    'pk.eyJ1IjoibGlxdWlkZmxhbWUiLCJhIjoiY2s3Ym9zZDNuMGE4ZjNubjIyOTh1eDQzYiJ9.EOzQWdKMBenIC4UuQpwtBA';

class HomeScreen extends StatefulWidget {
  static final String routeName = '/home_screen';

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  LatLng _center;

  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: getCurrentLocation,
              child: Text('current location'),
            ),
            Container(
              height: 700,
              child: FlutterMap(
                options: MapOptions(
                  center: _center,
                  zoom: 13.0,
                ),
                layers: [
                  TileLayerOptions(
                    urlTemplate: "https://api.tiles.mapbox.com/v4/"
                        "{id}/{z}/{x}/{y}@2x.png?access_token=$accessToken",
                    additionalOptions: {
                      'accessToken': accessToken,
                      'id': 'mapbox.streets',
                    },
                  ),
                  MarkerLayerOptions(
                    markers: [
                      Marker(
                        point: _center,
                        builder: (ctx) => Container(
                          child: Icon(
                            Icons.account_circle,
                            color: Colors.red.shade900,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    getCurrentLocation();
  }

  getCurrentLocation() async {
    Location location = new Location();

    bool _serviceEnabled;
    PermissionStatus _permissionGranted;
    LocationData _locationData;

    _serviceEnabled = await location.serviceEnabled();
    if (!_serviceEnabled) {
      _serviceEnabled = await location.requestService();
      if (!_serviceEnabled) {
        return;
      }
    }

    _permissionGranted = await location.hasPermission();
    if (_permissionGranted == PermissionStatus.DENIED) {
      _permissionGranted = await location.requestPermission();
      if (_permissionGranted != PermissionStatus.GRANTED) {
        return;
      }
    }

    _locationData = await location.getLocation();

    setState(() {
      _center = LatLng(_locationData.latitude, _locationData.longitude);
    });
  }
}

而且,缺少插件文档(或者至少我没有找到它)。

dictionary flutter dart
1个回答
1
投票

我不是Flutter的专家,但是看起来,一旦您创建了FlutterMap小部件,它便不会随新的_center一起重新加载,如果您看到小部件本身,就可以创建并使用mapcontroller移至其他位置,这将是示例代码:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
import 'package:location/location.dart';

final accessToken =
   'pk.eyJ1IjoibGlxdWlkZmxhbWUiLCJhIjoiY2s3Ym9zZDNuMGE4ZjNubjIyOTh1eDQzYiJ9.EOzQWdKMBenIC4UuQpwtBA';

class HomeScreen extends StatefulWidget {
 static final String routeName = '/home_screen';

 @override
 _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
 LatLng _center;
 MapController _mapController = MapController();

 Widget build(BuildContext context) {
   return SafeArea(
     child: Scaffold(
       body: Column(
         children: <Widget>[
           RaisedButton(
             onPressed: getCurrentLocation,
             child: Text('current location'),
           ),
           Container(
             height: 700,
             child: FlutterMap(
               options: MapOptions(
                 center: _center,
                 zoom: 13.0,
               ),
               mapController: _mapController,
               layers: [
                 TileLayerOptions(
                   urlTemplate: "https://api.tiles.mapbox.com/v4/"
                       "{id}/{z}/{x}/{y}@2x.png?access_token=$accessToken",
                   additionalOptions: {
                     'accessToken': accessToken,
                     'id': 'mapbox.streets',
                   },
                 ),
                 MarkerLayerOptions(
                   markers: [
                     Marker(
                       point: _center,
                       builder: (ctx) => Container(
                         child: Icon(
                           Icons.account_circle,
                           color: Colors.red.shade900,
                         ),
                       ),
                     ),
                   ],
                 ),
               ],
             ),
           ),
         ],
       ),
     ),
   );
 }

 @override
 void initState() {
   super.initState();
   getCurrentLocation();
 }

 getCurrentLocation() async {
   Location location = new Location();

   bool _serviceEnabled;
   PermissionStatus _permissionGranted;
   LocationData _locationData;

   _serviceEnabled = await location.serviceEnabled();
   if (!_serviceEnabled) {
     _serviceEnabled = await location.requestService();
     if (!_serviceEnabled) {
       return;
     }
   }

   _permissionGranted = await location.hasPermission();
   if (_permissionGranted == PermissionStatus.DENIED) {
     _permissionGranted = await location.requestPermission();
     if (_permissionGranted != PermissionStatus.GRANTED) {
       return;
     }
   }

   _locationData = await location.getLocation();

   setState(() {
     //_center = LatLng(_locationData.latitude, _locationData.longitude);
     _mapController.move(LatLng(_locationData.latitude, _locationData.longitude), 13.0);
   });
 }
}

希望有帮助!

© www.soinside.com 2019 - 2024. All rights reserved.