Flutter -> 在后台加载谷歌地图

Posted 2023-02-23

【中文标题】Flutter -> 在后台加载谷歌地图

【英文标题】：Flutter -> loading google maps in background

【发布时间】：2020-02-12 04:50:39

【问题描述】：

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

此 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 新手。

【参考方案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),
                      ),

【讨论】：

非常好的和简单的解决方案。比漂浮的例子容易得多:)