使用Flutter标测图显示标测图中的多个点

cwxwcias  于 2023-01-27  发布在  Flutter
关注(0)|答案(1)|浏览(197)

我是一个新手在flutter。我正在做一个项目,我想知道我如何可以渲染点列表使用latlong插件从flutter内flutterMap。我可以渲染第一个点,但无法显示其他点在列表中。你能指导我或纠正我的代码。

Widget _mapBuilder(BuildContext context) {
  final List<LatLng> _mapPoints = [
    LatLng(9.7, 123.1),
    LatLng(10.7, 124.9),
    LatLng(11.7, 125.05)
];
 return FlutterMap(
 options: MapOptions(
  center: _mapPoints[1],
  zoom: 16.0,
 ),
 layers: [
   TileLayerOptions(
    urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    subdomains: ['a', 'b', 'c'],
    attributionBuilder: (_) {
      return const Text("© OpenStreetMap contributors");
    },
  ),
  MarkerLayerOptions(markers: [
    for (var point in _mapPoints) ...[
      Marker(
        width: 15.0,
        height: 15.0,
        point: point,
        builder: (ctx) => Container(
          decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(50.0),
              border: Border.all(color: Colors.white, width: 2)),
        ),
      ),
    ]
  ]),
],

);

3ks5zfa0

3ks5zfa01#

您可以创建这样的标记列表,并在标记层所需的标记参数中使用该列表。

final List<LatLng> _mapPoints = [
      LatLng(12.9, 77.8),
      LatLng(12.1, 77.2),
      LatLng(12.5,77.4),
    ];
    for (LatLng i in _mapPoints){
      lister.add(Marker(point: i, builder:(ctx) =>
          Container(child: Column(
            children: [
              Icon(Icons.add,size: 40,),
              Text("data",style:  TextStyle(fontSize: 12),)
            ],
          ),
          )));
    }

相关问题