FlutterMap - 粘性标记不随地图移动

Question

我需要在地图中心创建带有粘性标记的位置选择器。标记位置应始终位于地图中心，并且标记销应指示任何地图移动/缩放/滚动上的当前纬度位置。

有人知道如何使用 FlutterMap 做到这一点吗？

Answer 1

您可以使用

MapController

跟踪地图的中心，以获得标记的正确位置。

代码

这是我在对话框内使用选择器制作的示例：

class MapPickerDialog extends StatefulWidget {
  const MapPickerDialog({
    super.key,
    required this.initialLocation,
    this.initialZoom = 5,
    this.mapSize = const Size(300, 300),
  });

  /// Initial location of the map widget.
  final LatLng initialLocation;

  /// Initial zoom level of the map widget.
  ///
  /// Defaults to 5.
  final double initialZoom;

  /// Customize the size of the map widget.
  ///
  /// Defaults to 300x300.
  final Size mapSize;

  @override
  State<MapPickerDialog> createState() => _MapPickerDialogState();
}

class _MapPickerDialogState extends State<MapPickerDialog> {
  final mapController = MapController();

  late final pickedLocation = ValueNotifier<LatLng>(widget.initialLocation);

  @override
  void dispose() {
    pickedLocation.dispose();
    mapController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Pick a location'),
      content: SizedBox.fromSize(
        size: widget.mapSize,
        child: FlutterMap(
          mapController: mapController,
          options: MapOptions(
            center: widget.initialLocation,
            zoom: widget.initialZoom,
            onMapReady: () => pickedLocation.value = mapController.center,
            onPositionChanged: (_, __) {
              pickedLocation.value = mapController.camera.center;
            },
          ),
          children: [
            TileLayer(
              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              tileProvider: NetworkTileProvider(),
              userAgentPackageName: 'dev.fleaflet.flutter_map.example',
            ),
            ValueListenableBuilder<LatLng>(
              valueListenable: pickedLocation,
              builder: (context, location, _) {
                return MarkerLayer(
                  markers: [
                    Marker(
                      point: location,
                      builder: (_) => const Icon(Icons.location_on),
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('Cancel'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context, pickedLocation.value),
          child: const Text('OK'),
        ),
      ],
    );
  }
}

截图

您可以在 zapp.run 上尝试完整的示例

（完全公开，我是 flutter_map 存储库的维护者之一）