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

【问题标题】：flutter_map - Why the location is changing, and the map is not moving?flutter_map - 为什么位置在变化，而地图没有移动？
【发布时间】：2019-12-16 14:25:10
【问题描述】：

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

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':
                    '<redacted for security>',
                '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}',
              ),
            ],
          ),
        ),
      ],
    );
  }
}

【问题讨论】：

有人可以帮助我吗？我不知道该怎么办。我认为应该这样工作，但事实并非如此。

标签： flutter dart

【解决方案1】：

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

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

【讨论】：