如何向颤动地图添加多个标记

Question

我对飞镖（扑动）还很陌生（两天后），所以我很裸。我正在尝试在我的 flutter 应用程序中向我的开放街道地图添加标记。我有一个 csv 文件，其中包含我想要添加的所有点，如下所示：

地点名称	纬度	经度
数据	数据	数据

我已经弄清楚如何添加单个标记 - 如何循环遍历 csv 文件中的行以添加多个标记？这是我当前的添加标记代码。

 Future<void> _addSingleMarker() async {
    // Given latitude and longitude
    final latitude = 53.7827922;
    final longitude = -1.5547318;

    markers.clear();
    markers.add(GeoPoint(latitude: latitude, longitude: longitude));
    await _addMarkersToMap();
  }

  Future<void> _addMarkersToMap() async {
    for (GeoPoint marker in markers) {
      print("Adding marker at latitude: ${marker.latitude}, longitude: ${marker.longitude}");
      await mapController.addMarker(marker,
          markerIcon: const MarkerIcon(
            icon: Icon(
              Icons.location_pin,
              color: Colors.blue,
              size: 48,
            ),
          ));
    }
    print("Markers added to the map");

Answer 1

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

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
 Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('Flutter Map with Multiple Markers'),
    ),
    body: MapWithMarkers(),
      ),
    );
  }
}

class MapWithMarkers extends StatelessWidget {
final List<LatLng> markerCoordinates = [
LatLng(53.7827922, -1.5547318), 
LatLng(53.780416, -1.58270),   
];

@override
Widget build(BuildContext context) {
 return FlutterMap(
  options: MapOptions(
    center: LatLng(53.7827922, -1.5547318), // Initial map center
    zoom: 12.0, // Initial zoom level
  ),
  layers: [
    TileLayerOptions(
      urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      subdomains: ['a', 'b', 'c'],
    ),
    MarkerLayerOptions(
      markers: _buildMarkers(), 
        ),
      ],
    );
  }

  List<Marker> _buildMarkers() {
  List<Marker> markers = [];
   for (int i = 0; i < markerCoordinates.length; i++) {
    markers.add(
    Marker(
      width: 80.0,
      height: 80.0,
      point: markerCoordinates[i], 
      builder: (ctx) => Icon(
        Icons.location_pin, 
        color: Colors.blue,
        size: 48,
         ),
       ),
     );
   }
   return markers;
  }
}