Flutter 如何在地图上用颜色标出不同的位置？

让我告诉你我的动机是什么。我正在制作一个应用程序，其中受新冠病毒高度影响的位置以红色、橙色和绿色显示。它们实际上是圆形的容器，有这三种颜色。 但是，我没有得到输出，因为我已经创建了这个。 请参阅代码：-

import 'package:flutter/material.dart';
import 'package:latlong/latlong.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class MapIntegration extends StatefulWidget {
  @override
  _MapIntegrationState createState() => _MapIntegrationState();
}

class _MapIntegrationState extends State<MapIntegration> {
  List redZoneData = new List();
  List orangeZoneData = new List();
  List greenZoneData = new List();
  Map overallData = {
    "Gujarat": LatLng(20.5937, 78.9629),
    "Dehi": LatLng(20.5937, 78.9629)
  };
  int n = 2;
  Map mapData;
  var totalConfirmed;
  var dataCalc;
  var death;
  var stateCode;
  mapDataValue() async {
    final url = 'https://api.rootnet.in/covid19-in/stats/latest';
    final response = await http.get(url);
    mapData = json.decode(response.body);
    if (response.statusCode == 200) {
      setState(() {
        for (int index = 0;
            index < mapData['data']['regional'].length;
            index++) {
          totalConfirmed = mapData['data']['regional'][index]['totalConfirmed'];
          death = mapData['data']['regional'][index]['deaths'];
          dataCalc = double.parse((totalConfirmed / death).toStringAsFixed(2));
          stateCode = mapData['data']['regional'][index]['loc'];
          if (dataCalc <= 40.00) {
            redZoneData.add(stateCode);
          } else {
            // print(stateCode);
            if (dataCalc > 40.00 && dataCalc <= 50.00) {
              orangeZoneData.add(stateCode);
            } else {
              greenZoneData.add(stateCode);
            }
          }
        }
        print(redZoneData);
        print(orangeZoneData);
        print(greenZoneData);
      });
    } else {
      throw Exception('loading failed...');
    }
  }

  Widget dataEvaluation() {
    var marker;
    for (int index = 0; index < mapData['data']['regional'].length; index++) {
      if (redZoneData.contains(mapData['data']['regional'][index]['loc'])) {
        marker = new Marker(
          width: 80.0,
          height: 80.0,
          point: new LatLng(20.5937, 78.9629),
          builder: (ctx) => new Container(
            height: 10,
            width: 10,
            decoration: new BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.red,
            ),
          ),
        );
      } else if (orangeZoneData
          .contains(mapData['data']['regional'][index]['loc'])) {
        marker = new Marker(
          width: 80.0,
          height: 80.0,
          point: new LatLng(20.5937, 78.9629),
          builder: (ctx) => new Container(
            height: 10,
            width: 10,
            decoration: new BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.orange,
            ),
          ),
        );
      } else if (greenZoneData
          .contains(mapData['data']['regional'][index]['loc'])) {
        marker = new Marker(
          width: 80.0,
          height: 80.0,
          point: new LatLng(20.5937, 78.9629),
          builder: (ctx) => new Container(
            height: 10,
            width: 10,
            decoration: new BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.green,
            ),
          ),
        );
      }
    }
    return marker;
  }

  @override
  void initState() {
    mapDataValue();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height / 1.3,
      child: Column(
        children: [
          Container(
            decoration: new BoxDecoration(
              borderRadius: new BorderRadius.circular(30.0),
            ),
            height: MediaQuery.of(context).size.height / 1.5,
            alignment: Alignment.centerRight,
            child: FlutterMap(
              options: new MapOptions(
                center: LatLng(22.5937, 78.9629),
                zoom: 4.3,
              ),
              layers: [
                new TileLayerOptions(
                  urlTemplate:
                      'https://api.mapbox.com/styles/v1/shivam7007/ckevbwl2u6ty11an4bfbicex7/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1Ijoic2hpdmFtNzAwNyIsImEiOiJja2VsMzRrcmcweW9vMnlwaXNiMzFrYjV2In0.CVRHP4CkMz_5UybuZ3CaIA',
                  additionalOptions: {
                    'acessToken':
                        'pk.eyJ1Ijoic2hpdmFtNzAwNyIsImEiOiJja2V0bXl4OXIxbmRrMnRvZWdkaWM5a29zIn0.doc-sYseA4b-Z7ylnp0Ttg',
                    'id': 'mapbox.mapbox-streets-v8',
                  },
                ),
                new MarkerLayerOptions(
                  markers: [
                    dataEvaluation(),
                  ],
                ),
              ],
            ),
          ),
          Text('$dataCalc'),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“包：latlong/latlong.dart”；
导入“包：颤振图/颤振图.dart”；
将“package:http/http.dart”导入为http；
导入“dart:convert”；
类MapIntegration扩展StatefulWidget{
@凌驾
_MapIntegrationState createState（）=>\u MapIntegrationState（）；
}
类_MapIntegrationState扩展状态{
List redZoneData=新列表（）；
List orangeZoneData=新列表（）；
List greenZoneData=新列表（）；
地图总体数据={
“古吉拉特邦”：拉丁语（20.5937,78.9629），
“德希”：拉丁语（20.5937，78.9629）
};
int n=2；
地图数据；
已确认的风险价值；
var数据计算；
var死亡；
var状态码；
mapDataValue（）异步{
最终url=https://api.rootnet.in/covid19-in/stats/latest';
最终响应=等待http.get（url）；
mapData=json.decode（response.body）；
如果（response.statusCode==200）{
设置状态（）{
对于（int指数=0；
索引新容器(
身高：10，
宽度：10，
装饰：新盒子装饰(
形状：BoxShape.circle，
颜色：颜色。橙色，
),
),
);
}else if（绿带数据）
.contains（地图数据['data']['regional'][索引]['loc']））{
标记=新标记(
宽度：80.0，
身高：80.0，
要点：新车床（20.5937,78.9629），
建造商：（ctx）=>新容器(
身高：10，
宽度：10，
装饰：新盒子装饰(
形状：BoxShape.circle，
颜色：颜色。绿色，
),
),
);
}
}
返回标记；
}
@凌驾
void initState（）{
mapDataValue（）；
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
返回容器(
高度：MediaQuery.of（context）.size.height/1.3，
子：列(
儿童：[
容器(
装饰：新盒子装饰(
边界半径：新边界半径。圆形（30.0），
),
高度：MediaQuery.of（context）.size.height/1.5，
对齐：alignment.centerRight，
孩子：地图(
选项：新地图选项(
中心：拉特林（22.5937,78.9629），
缩放：4.3，
),
图层：[
新TileLayerOptions(
URL模板：
'https://api.mapbox.com/styles/v1/shivam7007/ckevbwl2u6ty11an4bfbicex7/tiles/256/{z} /{x}/{y}@2x？访问令牌=pk.eyj1ijoic2hpdmftnzawnyisimeioiijja2vsmzrrcmcwew9vmnlwaxnimzfryjv2in0.CVRHP4CkMz_5UybuZ3CaIA'，
其他选项：{
“acessToken”：
“主键EYJ1IJOIC2HPDMFTNZHANGYISMEIOIJJA2V0BXL4OxiXBMRmnrVZWDKAWM5A29ZIN0.doc-sYseA4b-Z7ylnp0Ttg”，
“id”：“mapbox.mapbox-streets-v8”，
},
),
新MarkerLayerProptions(
标记：[
dataEvaluation（），
],
),
],
),
),
文本（“$dataCalc”），
],
),
);
}
}

并在MarkerLayerOption小部件中调用dataEvaluation（）会引发一个名为“元素类型'widget'无法分配给列表类型'Marker'的错误”。 实际上，我已经创建了一个调用dataEvaluation（）的函数，该函数将计算状态是否存在于红色、橙色或绿色区域中，并根据该状态返回基于红色、橙色或绿色的容器，该容器将作为地图上的一个点工作。 请解决这个问题，如果您在理解问题时发现任何困难，请告诉我。但是请解决这个问题。我什么也找不到。

---

API is=

我发现了这一点。这很容易，因为Flatter为您提供了在小部件中编写单行代码的功能，所以您可以轻松地完成同样的操作

for (var index in mapDataFinal)
 if (redZoneData.contains(index))
  new Marker(
  width: 80.0,
  height: 80.0,
  point: new LatLng(26.8467, 80.9462),
  builder: (ctx) => new Container(
                          height: 10,
                          width: 10,
                          decoration: new BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.red,
                          ),
                        ),
                      )

不需要把花括号放在那里。 完整代码如下：

new MarkerLayerOptions(markers: [
                  for (var index in mapDataFinal)
                    if (redZoneData.contains(index))
                      new Marker(
                        width: 80.0,
                        height: 80.0,
                        point: new LatLng(26.8467, 80.9462),
                        builder: (ctx) => new Container(
                          height: 10,
                          width: 10,
                          decoration: new BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.red,
                          ),
                        ),
                      )
                    else if (orangeZoneData.contains(index))
                      new Marker(
                        width: 80.0,
                        height: 80.0,
                        point: new LatLng(10.8505, 76.2711),
                        builder: (ctx) => new Container(
                          height: 10,
                          width: 10,
                          decoration: new BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.orange,
                          ),
                        ),
                      )
                    else if (greenZoneData.contains(index))
                      new Marker(
                        width: 80.0,
                        height: 80.0,
                        point: new LatLng(22.2587, 71.1924),
                        builder: (ctx) => new Container(
                          height: 10,
                          width: 10,
                          decoration: new BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.green,
                          ),
                        ),
                      )
                ]),