让我告诉你我的动机是什么。我正在制作一个应用，其中受COVID高度影响的位置以红色，橙色和绿色显示。它们实际上是圆形的并且具有这三种颜色的容器。
但是，我没有像创建它一样得到输出。
请查看代码:-
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'),
],
),
);
}
}
实际上，我已经创建了一个调用dataEvaluation()的函数，该函数将计算STATE是否存在于红色，橙色或绿色区域中，并根据该状态返回基于红色，橙色或gree颜色的容器，并且容器将在 map 上作为一个地点。
请解决此问题，如果您在理解问题时遇到任何困难，请告诉我。 但请解决此问题。我被困无处。
API是= https://api.rootnet.in/covid19-in/stats/latest
最佳答案
我找到了这个。 flutter很容易为您提供在Widget中编写单行代码的功能，因此您可以轻松地执行相同操作。
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,
),
),
)
]),
关于flutter - 如何在 map 上用颜色发现不同的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63845535/