Question

我为我的应用程序使用flutter_map和geolocator软件包。我已经构建了MainMap小部件来管理Geolocator（）中的流，并将其传递给另一个小部件。一切都好，当我的位置发生变化时，我的标记正在移动，但我的地图仍停留在同一位置。我不知道为什么中心属性根本没有变化。 _currentPosition值很好，因为它们在“文本”小部件中可以正确更改。

options: MapOptions(
            center: _currentPosition,
            zoom: 10,
            plugins: [
              MarkerClusterPlugin(),
            ],
          ),

Text('${_currentPosition.latitude}, ${_currentPosition.longitude}',),

这是整个代码。

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

class MainMap extends StatelessWidget {
  final locationOptions =
      LocationOptions(accuracy: LocationAccuracy.best, distanceFilter: 0);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: Geolocator().getPositionStream(locationOptions),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
        return MainMapContent(position: snapshot.data);
      },
    );
  }
}

class MainMapContent extends StatefulWidget {
  final Position position;

  MainMapContent({this.position, Key key}) : super(key: key);

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

class _MainMapContentState extends State<MainMapContent> {
  @override
  Widget build(BuildContext context) {
    final _currentPosition =
        LatLng(widget.position.latitude, widget.position.longitude);
    return Stack(
      children: <Widget>[
        FlutterMap(
          options: MapOptions(
            center: _currentPosition,
            zoom: 10,
            plugins: [
              MarkerClusterPlugin(),
            ],
          ),
          layers: [
            TileLayerOptions(
              urlTemplate: "https://api.tiles.mapbox.com/v4/"
                  "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
              additionalOptions: {
                'accessToken':
                    'pk.eyJ1IjoiZmx1dHRlcmRldnBsIiwiYSI6ImNrNDE3cDNuMDA4emUzbW45OXZxcTY2aGgifQ.60LIVgBtOhjSHjhds',
                'id': 'mapbox.streets',
              },
            ),
            MarkerClusterLayerOptions(
              maxClusterRadius: 50,
              size: Size(40, 40),
              anchor: AnchorPos.align(AnchorAlign.center),
              fitBoundsOptions: FitBoundsOptions(
                padding: EdgeInsets.all(50),
              ),
              markers: [
                Marker(
                  anchorPos: AnchorPos.align(AnchorAlign.center),
                  height: 30,
                  width: 30,
                  point: _currentPosition,
                  builder: (ctx) => Container(
                    height: 40,
                    width: 40,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(50),
                    ),
                    child: Icon(
                      Icons.account_circle,
                      color: Colors.black,
                      size: 30,
                    ),
                  ),
                ),
              ],
              polygonOptions: PolygonOptions(
                borderColor: Colors.blueAccent,
                color: Colors.black12,
                borderStrokeWidth: 3,
              ),
              builder: (context, markers) {
                return FloatingActionButton(
                  child: Text(markers.length.toString()),
                  onPressed: null,
                );
              },
            ),
          ],
        ),
        Container(
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 10),
              Text(
                '${_currentPosition.latitude}, ${_currentPosition.longitude}',
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

我有一个类似的问题，对我来说，最简单的方法是对Flutter Maps使用https://github.com/igaurab/user_location_plugin。插件会自动移动地图，以使当前位置始终位于中间。您也可以在设置中禁用它（这对我的应用程序很烦人），但是默认情况下，插件应符合您的要求。

顺便说一句：我认为发布您的访问令牌不是很好。我使用“ https://mt0.google.com/vt/lyrs=s,h&hl=de&x=8&y=6&z=4”作为图块提供程序，因此我的用户有典型的Google Maps感觉，不需要任何访问令牌。谷歌Tile Provider可能对您也很有趣。

flutter_map-为什么位置在变化，而地图却没有移动？

1 个答案: