时间戳

首页 > 解决方案 > 在谷歌地图上热重载之前不显示标记，颤抖

flutter - 在谷歌地图上热重载之前不显示标记，颤抖

问题描述

我将标记添加到googlemap。

在这段代码中。第一次加载时，没有标记

当我推动r热重载时，会出现标记

我只是猜想，我可能不得不在这里做点什么？？？

setState((){
  print("items ready and set state");
});

我该如何解决这个问题？

class _MapPageState extends State<MapPage> {

  Completer<gmap.GoogleMapController> _controller = Completer();

  Set<gmap.Marker> _markers = {};


  @override
  void initState(){
    super.initState();
    _asyncMethod();
    print("init ready");
  }

  _asyncMethod() async {
    _markers = {};

    print ("asyncMethod start");
    
    List<dynamic> wayLabels = annotModel['wayLabel'];
    wayLabels.forEach((x){
      gmap.BitmapDescriptor icon;
      gmap.BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5),
            x['image'][CommonFunc.langKey]).then((onValue) {
            icon = onValue;
            gmap.Marker marker = gmap.Marker(
              markerId: gmap.MarkerId(x['title']),
              position: gmap.LatLng(x['latitude'],x['longitude']),
              icon: icon
            );
            _markers.add(marker);
        });
    });
    
    setState((){
      print("items ready and set state");
    });
  }
  Widget makeMyMap(){
    gmap.GoogleMap myMap = gmap.GoogleMap(
      mapType: gmap.MapType.normal,
      markers : _markers,
      initialCameraPosition: _kGooglePlex,
      onMapCreated: (gmap.GoogleMapController controller) {
        _controller.complete(controller);
      }
    );
    return Container(child:myMap);
  }

  @override
  Widget build(BuildContext context){
    return 
      Column(children: <Widget>[
          Expanded(child:Stack(children: <Widget>[
            makeMyMap(),
          ]),),
      ]);
  }
}

gmap.BitmapDescriptor.fromAssetImage可能需要时间

    setState((){
      print("items ready and set state");
    });

在_asyncMethod()

在设置每个标记之前调用。

这就是问题所在。

解决方案。

改变_markers.add(marker);

至

setState((){
  _markers = markers;
  print("items ready and set state");
});

它运作良好。

标签： flutterdart

解决方案

你应该尝试使用这个包https://pub.dev/packages/after_layout。在 afterFirstLayout 方法中调用 _asyncMethod

@override
  void afterFirstLayout(BuildContext context) {
    // Calling the same function "after layout" to resolve the issue.
    _asyncMethod();
  }

另外，我认为将 _asyncMethod 中的标记分配给局部变量然后在 setState 中更改标记更健康

_asyncMethod() async {
    var localMarkers = {};

    .
    .
    .
    
    setState((){
        _markers = localMarkers;
    });
  }

推荐阅读