Flutter -> 后台加载谷歌地图

Question

我需要在后台加载地图，因为当我第一次点击包含maps.dart的选项卡时，地图正在加载。这看起来很糟糕，所以我想使用FutureBuilder来显示CircularProgressIndicator()，但我不知道该怎么做。 我知道如何对列表进行操作，但在这种情况下......

这是maps.dart代码：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class Maps extends StatefulWidget {
  @override
  _MapsState createState() => _MapsState();
}

class _MapsState extends State<Maps> with AutomaticKeepAliveClientMixin {
  Completer<GoogleMapController> _controller = Completer();

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

  double zoomValue = 9.0;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Stack(
        children: <Widget>[
          _buildGoogleMap(context),
          _zoomMinusFunction(),
          _zoomPlusFunction(),
        ],
      ),
    );
  }

  Widget _zoomMinusFunction() {
    return Align(
      alignment: Alignment.topLeft,
      child: IconButton(
          icon: Icon(FontAwesomeIcons.searchMinus, color: Color(0xff6200ee)),
          onPressed: () {
            zoomValue--;
            _minus(zoomValue);
          }),
    );
  }

  Widget _zoomPlusFunction() {
    return Align(
      alignment: Alignment.topRight,
      child: IconButton(
          icon: Icon(FontAwesomeIcons.searchPlus, color: Color(0xff6200ee)),
          onPressed: () {
            zoomValue++;
            _plus(zoomValue);
          }),
    );
  }

  Future<void> _minus(double zoomValue) async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(target: LatLng(x, y), zoom: zoomValue)));
  }

  Future<void> _plus(double zoomValue) async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(target: LatLng(x, y), zoom: zoomValue)));
  }

  Widget _buildGoogleMap(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition:
            CameraPosition(target: LatLng(x, y), zoom: 9),
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        markers: {
          aaa,
          bbb,
        },
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

Marker aaa = Marker(
  markerId: MarkerId('aaa'),
  position: LatLng(x, y),
  infoWindow: InfoWindow(title: 'aaa', snippet: 'aaa'),
  icon: BitmapDescriptor.defaultMarkerWithHue(
    BitmapDescriptor.hueViolet,
  ),
);

Marker bbb = Marker(
  markerId: MarkerId('bbb'),
  position: LatLng(x, y),
  infoWindow:
      InfoWindow(title: 'bbb', snippet: 'bbb'),
  icon: BitmapDescriptor.defaultMarkerWithHue(
    BitmapDescriptor.hueViolet,
  ),
);

对不起，我对Flutter还不太熟悉。

- mmcib

Answer 1

我知道有点晚了，但如果还有帮助的话，这是我所做的。

_userLocation == null // If user location has not been found
                    ? Center(
                        // Display Progress Indicator
                        child: CircularProgressIndicator(
                          backgroundColor: UniColors.primaryColour[500],
                        ),
                      )
                    : GoogleMap(
                        // Show Campus Map
                        onMapCreated: _onMapCreated,
                        initialCameraPosition: // required parameter that sets the starting camera position. Camera position describes which part of the world you want the map to point at.
                            CameraPosition(
                                target: _userLocation,
                                zoom: defaultZoom,
                                tilt: 0.0),
                        scrollGesturesEnabled: true,
                        tiltGesturesEnabled: true,
                        trafficEnabled: false,
                        indoorViewEnabled: true,
                        compassEnabled: true,
                        rotateGesturesEnabled: true,
                        myLocationEnabled: true,
                        mapType: _currentMapType,
                        zoomGesturesEnabled: true,
                        cameraTargetBounds: new CameraTargetBounds(
                          new LatLngBounds(
                            northeast: uniCampusNE,
                            southwest: uniCampusSW,
                          ),
                        ),
                        minMaxZoomPreference:
                            new MinMaxZoomPreference(minZoom, maxZoom),
                      ),

- Andrew Stevenson

---

非常好的简单解决方案。比周围流传的例子要容易得多 :) - giorgio79