时间戳

首页 > 解决方案 > 如何在地图上用颜色发现不同的位置？

flutter - 如何在地图上用颜色发现不同的位置？

问题描述

让我告诉你我的动机是什么。我正在制作一个应用程序，其中受 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'),
        ],
      ),
    );
  }
}

在 MarkerLayerOption 小部件中调用 dataEvaluation() 会引发一个错误，称为“元素类型 'Widget' 无法分配给列表类型 'Marker'。 ” 实际上我创建了一个调用 dataEvaluation() 的函数，它将计算状态是否为出现在红色、橙色或绿色区域中，并据此根据红色、橙色或绿色返回容器，该容器将作为地图上的一个点。请解决这个问题，如果您在理解问题时发现任何困难，请告诉我。但是请解决这个问题。我被困在无处可寻。 API = https://api.rootnet.in/covid19-in/stats/latest

标签： flutterdartflutter-layoutmapboxflutter-test

解决方案

我找到了这个。Flutter 为您提供了在 Widgets 中编写单行代码的便利，因此您可以轻松地做到这一点。

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,
                          ),
                        ),
                      )
                ]),

推荐阅读