Flutter中Set<Marker>跨页面传递后地图标记无法显示的问题

问题根源 #

标记不显示主要有三个核心原因：

1. MapSample 的StatefulWidget未将传入的标记集合保存为可访问的成员变量，导致State无法获取传递的标记数据
2. GoogleMap 组件未正确绑定传递过来的标记集合
3. 未配置初始相机位置，地图可能定位到非标记区域，导致看不见标记

修正步骤 #

1. 修复 map_view.dart 的 MapSample 组件

将传入的标记集合设为StatefulWidget的final成员，并在State中通过widget.markers访问，同时配置初始相机位置定位到标记处：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapSample extends StatefulWidget {
  // 定义可访问的标记集合成员
  final Set<Marker> markers;
  const MapSample(this.markers, {Key? key}) : super(key: key);

  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  CameraPosition? _initialCameraPosition;

  @override
  void initState() {
    super.initState();
    // 从标记集合中获取初始相机位置，确保地图定位到标记点
    if (widget.markers.isNotEmpty) {
      final firstMarker = widget.markers.first;
      _initialCameraPosition = CameraPosition(
        target: firstMarker.position,
        zoom: 14.0, // 合适的缩放级别
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _initialCameraPosition != null
          ? GoogleMap(
              mapType: MapType.normal,
              initialCameraPosition: _initialCameraPosition!,
              markers: widget.markers, // 绑定传递过来的标记集合
              onMapCreated: (GoogleMapController controller) {
                // 可添加地图创建后的逻辑
              },
            )
          : const Center(child: Text("无可用标记位置")),
    );
  }
}

2. 优化 info_window.dart 的异步逻辑

用await替代then让代码更简洁易读，不影响功能：

final Set<Marker> _markers = {};
Future<void> _addMarker() async {
  final userLocation = await getUserCurrentLocation();
  const String markerId = "2";
  _markers.add(Marker(
    markerId: MarkerId(markerId),
    position: LatLng(userLocation.latitude, userLocation.longitude),
    infoWindow: InfoWindow(
      title: '我的当前位置',
      snippet: '从信息窗口捕获',
      onTap: _goToInfoScreen,
    ),
  ));
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => MapSample(_markers),
    ),
  );
}

关键注意点 #

• 确保google_maps_flutter依赖已正确配置，位置权限已申请并授权
• 如果后续需要动态更新标记，建议使用setState或状态管理工具（如Provider），当前场景传递集合已满足需求

内容的提问来源于stack exchange，提问作者Spencer Maginsky