如何在地图上用颜色发现不同的位置？ [英] How to spot different locations with colors on Map?
本文介绍了如何在地图上用颜色发现不同的位置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
让我告诉你我的动机是什么。我正在制作一个应用，其中受COVID高度影响的位置以红色，橙色和绿色显示。它们实际上是圆形的并且具有这三种颜色的容器。
但是，由于创建了该输出，因此没有得到输出。
请参见代码：-
Let me tell you what my motive is. I am making an app in which the locations which are highly affected by COVID is displayed by red, orange, and green colors. They are actually containers which are circular in shape and of these three colors. But, I am not getting the output as I have created this. Please see the code:-
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'),
],
),
);
}
}
并在MarkerLayerOption小部件中调用dataEvaluation（）引发错误，称为 不能将元素类型'Widget'分配给列表类型'Marker'。
实际上我已经创建了一个调用dataEvaluation的函数（），它将计算STATE是否出现在红色，橙色或绿色区域中，并根据该状态返回基于红色，橙色或gree颜色的容器，并且该容器将在地图。
请解决此问题，如果您在理解问题时遇到任何困难，请告诉我。 但是请解决此问题。我被困住了。
API是= https：/ /api.rootnet.in/covid19-in/stats/latest
推荐答案
我发现了这一点。 flutter很容易为您提供在Widget中编写单行代码的功能，因此您可以轻松地执行同样的操作。
I found this. It is easy as flutter provides you to write the single line code in the Widgets, so you can easily do the same.
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,
),
),
)
不需要在这里放大括号。
完整代码在这里：
Don't need to put curly braces over there. Full Code is here:
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,
),
),
)
]),
这篇关于如何在地图上用颜色发现不同的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
