在颤振中将纬度和经度传递给Latlng时出错答案

【问题标题】：Error when passing latitude and longitude to Latlng in flutter在颤振中将纬度和经度传递给Latlng时出错
【发布时间】：2021-06-11 07:30:24
【问题描述】：

我正在尝试重构我的代码并将 showMap 类分离到一个新的 dart 文件中。我正在从调用此类的屏幕向 showMap 传递纬度和经度。我检查过这里的纬度和经度不为空。但我收到一条错误消息：

The following NoSuchMethodError was thrown building showMap(dirty): The method 'compareTo' was called on null. Receiver: null Tried calling: compareTo(-90.0)

class showMap extends StatelessWidget {
  showMap({this.latitude, this.longitude});
  double latitude;
  double longitude;

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(latitude, longitude), // The Error line
        zoom: 16.0,
      ),
      layers: [
        TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']),
        MarkerLayerOptions(
          markers: [
            Marker(
              width: 80.0,
              height: 80.0,
              point: LatLng(58.7041, 37.1025),
              builder: (ctx) => GestureDetector(
                child: Container(
                  child: Icon(
                    Icons.location_on,
                    size: 60,
                    color: Color(0xFF744D81),
                  ),
                ),
                onTap: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return MarkerPopup();
                      });
                },
              ),
            ),
            Marker(
              width: 80.0,
              height: 80.0,
              point: LatLng(58.4419, 37.0784),
              builder: (ctx) => GestureDetector(
                child: Container(
                  child: Icon(Icons.location_on,
                      size: 60, color: Color(0xFF744D81)),
                ),
                onTap: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return MarkerPopup();
                      });
                },
              ),
            ),
          ],
        ),
      ],
    );
  }
}

下面是调用 showMap 的部分代码：

class _HomePageState extends State<HomePage> {

  void getLocation() async {
    Location location = Location();
    await location.getCurrrentLocation();
    latitude = location.latitude;
    longitude = location.longitude;
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Udan'),
        backgroundColor: Color(0xFF4E295B),
        centerTitle: true,
      ),
      
      body: Stack(
        children: <Widget>[
          showMap(
            latitude: latitude,
            longitude: longitude,
          ),
        ],
      ),
    );
  }
}

奇怪的是，一两秒后，错误消失了，地图加载到了正确的中心。但与此同时，代码中断并且屏幕显示错误。我猜这是因为获取位置需要时间，并且传递纬度和经度的空值，直到获取位置。在将值分配给 showMap 之前，我已经在原始屏幕中使用了异步等待。我怎样才能让它工作？谢谢。

【问题讨论】：

能否提供调用showMap的代码？
@MindStudio 我已经用调用 showMap 的代码更新了问题。希望它有助于更好地了解情况。

标签： flutter dart openstreetmap flutter-dependencies flutter-packages

【解决方案1】：

getLocation 方法包含一个异步操作，并且 build 方法在它解析之前执行。

一个选项可以是在纬度和经度为空时显示加载器。一旦未来的 location.getCurrrentLocation 得到解决，您就可以调用 showMap。

【讨论】：

【解决方案2】：

showMap() 在任何位置数据存在之前被调用。您应该等待位置数据，然后使用数据构建地图。这可以使用FutureBuilder 来完成：

首先，你应该创造一个未来。

Future<Location> getLocation = Future<Location>() async {
    Location location = new Location();
    var serviceEnabled = await location.serviceEnabled();
    if (!serviceEnabled) {
      serviceEnabled = await location.requestService();
      if (!serviceEnabled) {
        return null;
      }
    }
    var currentLocation = await location.getLocation();
    return currentLocation;
  }

然后返回一个 FutureBuilder 代替 showMap()：

FutureBuilder<Location>(
        future: getLocation(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return showMap(latitude: snapshot.data.latitude, longitude: snapshot.data.longitude);
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        });

我无法验证我的代码，因为我无法让位置包工作。如果您发现任何错误，我很乐意编辑我的答案。

【讨论】：