如何在Flutter的Google Map中从Firebase动态添加标记？

当然可以从Firebase获取商铺坐标并在Google Map上展示，下面是具体的实现步骤和代码修改方案：

1. Firebase 数据准备 #

在Firestore中创建一个shops集合，每个商铺文档包含以下字段：

• name：商铺名称（字符串）
• latitude：纬度（数值型）
• longitude：经度（数值型）

示例文档结构：

{
  "name": "Mash AutoGarage",
  "latitude": -1.113418,
  "longitude": 37.0224462
}

2. 添加依赖 #

确保pubspec.yaml中包含以下依赖（使用最新稳定版本即可）：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.0.0
  cloud_firestore: ^4.0.0
  google_maps_flutter: ^2.0.0

3. 代码修改 #

首先创建一个商铺模型类，用于解析Firebase返回的数据：

class Shop {
  final String id;
  final String name;
  final double latitude;
  final double longitude;

  Shop({
    required this.id,
    required this.name,
    required this.latitude,
    required this.longitude,
  });

  // 从Firestore文档转换为Shop对象
  factory Shop.fromDocument(DocumentSnapshot doc) {
    return Shop(
      id: doc.id,
      name: doc['name'],
      latitude: doc['latitude'].toDouble(),
      longitude: doc['longitude'].toDouble(),
    );
  }
}

然后修改你的State类，添加获取商铺数据的方法，并替换手动添加Marker的逻辑：

// 在State类中新增获取商铺数据的方法
Future<List<Shop>> fetchShops() async {
  try {
    QuerySnapshot snapshot = await FirebaseFirestore.instance.collection('shops').get();
    return snapshot.docs.map((doc) => Shop.fromDocument(doc)).toList();
  } catch (e) {
    print('获取商铺数据失败: $e');
    return [];
  }
}

// 修改FloatingActionButton的onPressed逻辑
floatingActionButton: FloatingActionButton.extended(
  onPressed: () async {
    Position position = await _determinePosition();
    newgoogleMapController?.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(
            target: LatLng(position.latitude, position.longitude),
            zoom: 14)));
    markers.clear();
    // 添加当前位置标记
    markers.add(
      Marker(
        markerId: const MarkerId('Current Location'),
        position: LatLng(position.latitude, position.longitude),
        infoWindow: const InfoWindow(
          title: 'My Position',
        ),
      ),
    );

    // 从Firebase拉取商铺数据并生成标记
    List<Shop> shops = await fetchShops();
    for (var shop in shops) {
      markers.add(
        Marker(
          markerId: MarkerId(shop.id),
          position: LatLng(shop.latitude, shop.longitude),
          infoWindow: InfoWindow(
            title: shop.name,
          ),
          icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueOrange),
        ),
      );
    }

    setState(() {});
  },
  label: const Text('Current Location'),
  icon: const Icon(Icons.location_history),
),

4. 实时更新（可选） #

如果需要实时同步Firebase中的商铺数据变化，可以用snapshots()监听集合更新：

@override
void initState() {
  super.initState();
  // 监听商铺数据变化，实时更新地图标记
  FirebaseFirestore.instance.collection('shops').snapshots().listen((snapshot) {
    List<Shop> shops = snapshot.docs.map((doc) => Shop.fromDocument(doc)).toList();
    setState(() {
      // 保留当前位置标记，清除旧的商铺标记
      markers.removeWhere((marker) => marker.markerId.value != 'Current Location');
      // 添加新的商铺标记
      for (var shop in shops) {
        markers.add(
          Marker(
            markerId: MarkerId(shop.id),
            position: LatLng(shop.latitude, shop.longitude),
            infoWindow: InfoWindow(title: shop.name),
            icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueOrange),
          ),
        );
      }
    });
  });
}

注意事项 #

• 确保在main函数中完成Firebase初始化：await Firebase.initializeApp()
• 配置好Google Maps的API密钥，保证地图正常加载
• 给Firestore设置合理的安全规则，防止未授权访问

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