如何使用 Google Maps Plugin Flutter 从另一个 class 动画相机

Question

我有一个 main.dart 文件，我正在其中构建一个 HomePage()，其中包含抽屉、列表图块和地图。我已经在另一个 dart 文件中实现了 google 地图插件（请参阅下面的代码），我只是在 HomePage() 中的脚手架主体中调用 MapPage()。

现在我需要通过调用函数 goToLoyola() 按下抽屉中的列表图块之一来设置相机动画，所以我的问题是，如何从 [=14= 访问此函数] ?

抱歉，我觉得我的问题很糟糕，但我是新手，还在学习 flutter。谢谢你。

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  GoogleMapController _controller;
  LatLng _currentLocation;
  CameraPosition _initialCameraLocation;
  StreamSubscription _locationSubscription;

  Location _location = new Location();
  String error;

  goToLoyola() {
    _controller.animateCamera(CameraUpdate.newCameraPosition(_loyolaCampus));
  }

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

    initPlatformState();
    _locationSubscription =
        _location.onLocationChanged().listen((newLocalData) {
      setState(() {
        _currentLocation =
            LatLng(newLocalData.latitude, newLocalData.longitude);
        _initialCameraLocation = CameraPosition(
          target: _currentLocation,
          zoom: CAMERA_ZOOM,
          tilt: CAMERA_TILT,
          bearing: CAMERA_BEARING,
        );
      });
    });
  }

  @override
  void dispose() {
    if (_locationSubscription != null) {
      _locationSubscription.cancel();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    while (_initialCameraLocation == null) {
      return Text("Loading Map");
    }
    return GoogleMap(
        myLocationEnabled: true,
        myLocationButtonEnabled: true,
        compassEnabled: false,
        tiltGesturesEnabled: true,
        mapType: MapType.normal,
        indoorViewEnabled: true,
        trafficEnabled: false,
        initialCameraPosition: _initialCameraLocation,
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
        });
  }

Answer 1

class MapPage extends StatefulWidget {
  final MapCreatedCallback onMapCreated;

  const MapPage({Key key, this.onMapCreated}) : super(key: key);

  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  GoogleMapController _controller;
  CameraPosition _initialCameraLocation;

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: (GoogleMapController controller) {
        _controller = controller;
        widget.onMapCreated(controller);
      },
      initialCameraPosition: _initialCameraLocation,
    );
  }
}

首页：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    GoogleMapController map;

    void goToLoyola() {
      //map.animateCamera(...)
    }

    return Stack(
      children: <Widget>[
        MapPage(
          onMapCreated: (controller) => map = controller,
        ),
      ],
    );
  }
}

Answer 2

您可以尝试在 MapPage 构造函数中添加 Completer<GoogleMapController>。例如：

class SamplePage extends StatefulWidget {

    Completer<GoogleMapController> completer;

    SamplePage({Key key, this.completer}) : super(key: key);

    @override
    State<StatefulWidget> createState() => SamplePageState();

}

class SamplePageState extends State<SamplePage> {

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

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: GoogleMap(
                mapType: MapType.normal,
                myLocationEnabled: true,
                myLocationButtonEnabled: true,
                initialCameraPosition: _defaultCameraPosition,
                onMapCreated: (GoogleMapController controller) async {
                    widget.completer.complete(controller);
                },
            )
        );
    }

    static final CameraPosition _defaultCameraPosition = CameraPosition(
        target: LatLng(1.3139961, 103.7041659),
        zoom: 14.4746,
    );

}

然后在您的 HomePage() 中添加一个新函数，如下所示：

...
...

Completer<GoogleMapController> _completer = Completer();

Future<void> animateTo(double lat, double lng) async {
    final c = await _completer.future;
    final p = CameraPosition(target: LatLng(lat, lng), zoom: 14.4746);
    c.animateCamera(CameraUpdate.newCameraPosition(p));
}

...
...

Don't forget to pass your _completer variable to your MapPage(completer: _completer)

如何使用 Google Maps Plugin Flutter 从另一个 class 动画相机

How to animate camera from another class using Google Maps Plugin Flutter

flutter

flutter-plugin