时间戳

首页 > 解决方案 > 颤动 map_view 中心到用户位置

google-maps - 颤动 map_view 中心到用户位置

问题描述

我正在使用map_view插件在我的 Fluter 应用程序中构建地图。我正在按照示例进行操作，但我想将地图初始化为用户当前位置，而不对坐标进行硬编码。

我一直在研究文档和 Github 问题并发现了这个，但我不明白如何应用它。

地图以这种方式初始化：

mapView.show(
    new MapOptions(
        mapViewType: MapViewType.normal,
        showUserLocation: true,
        initialCameraPosition: new CameraPosition(
            new Location(45.5235258, -122.6732493), 14.0),
        title: "Recently Visited"),
    toolbarActions: [new ToolbarAction("Close", 1)]);

地图准备就绪时收到通知

如何使用此代码设置地图的位置？

mapView.onLocationUpdated.listen((location) => myUserLocation = location);

这是我的全部代码：

Location myUserLocation = null;

class NuMapView extends StatefulWidget {
  @override
_NuMapViewState createState() => new _NuMapViewState();
}




class _NuMapViewState extends State<NuMapView> {
  static String apiKey = "mykey";

  MapView mapView;
  CameraPosition cameraPosition;
  var compositeSubscription = new CompositeSubscription();
  var staticMapProvider = new StaticMapProvider(apiKey);
  Uri staticMapUri;




  @override
  void initState(){
      print("dentro init state\n");

  mapView = new MapView();
  mapView.onLocationUpdated.listen((location) {
    print("cacchissime\n");
    if (myUserLocation == null){
      print("user location non null\n");
      myUserLocation = location;
      showMap();
    }
    else {
      print("user location è nullo!!\n");
    }


  } );

  super.initState();
    }



    bool ready = false;

  List<Marker> _markers = new List<Marker>();


    });
  }





  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Text("ciao")
      ),

    );
  }

  showMap() {
    mapView.show(
        new MapOptions(
            mapViewType: MapViewType.normal,
            showUserLocation: true,
            showMyLocationButton: true,
            showCompassButton: true,
            initialCameraPosition: new CameraPosition(
                new Location(myUserLocation.latitude, myUserLocation.longitude), 35.0),
            hideToolbar: false,
            title: "Cerca sulla mappa"),

        );
    StreamSubscription sub = mapView.onMapReady.listen((_) {
      mapView.setMarkers(_markers);

    });
    compositeSubscription.add(sub);
    sub = mapView.onLocationUpdated.listen((location) {
      print("Location updated $location");
    });
    compositeSubscription.add(sub);
    sub = mapView.onTouchAnnotation
        .listen((annotation) => print("annotation ${annotation.id} tapped"));
    compositeSubscription.add(sub);

    sub = mapView.onCameraChanged.listen((cameraPosition) =>
        this.setState(() => this.cameraPosition = cameraPosition));
    compositeSubscription.add(sub);


  }

标签： google-mapsdartflutter

解决方案

好的，根据您发布的信息，您可以执行以下操作：

  //state class variable    
  Location myUserLocation;


      @override
      void initState() {
         mapView.onLocationUpdated.listen((location) {
            if (myUserLocation == null){
                myUserLocation = location;
                _loadMap();
            }

         } );
        super.initState();
      }


      _loadMap(){
          mapView.show(
           new MapOptions(
              mapViewType: MapViewType.normal,
              showUserLocation: true,
              initialCameraPosition: new CameraPosition(
                  new Location(myUserLocation.latitude, myUserLocation.longitude), 14.0),
              title: "Recently Visited"),
          toolbarActions: [new ToolbarAction("Close", 1)]);
      }

首先，在initState您可以获取当前位置并使用您的位置调用 showMap 之后。

推荐阅读