Google Maps Flutter：加载地图之前出现黑屏

Posted 2023-02-23

【中文标题】Google Maps Flutter：加载地图之前出现黑屏

【英文标题】：Google Maps Flutter: I am getting black screen before loading maps

【发布时间】：2020-01-07 03:26:32

【问题描述】：

我在加载地图之前出现黑屏，我尝试在 build() 方法上创建一个地图小部件并将其存储在一个变量中，以便在我打开底页时使用它，但我仍然面临同样的问题。请看下面的截图：

https://user-images.githubusercontent.com/7915601/64229575-9d27e600-cf03-11e9-8619-9a7d1892d58d.gif

代码

  Widget _buildMap() 
    return Expanded(
      flex: 1,
      child: MapWidget(
        initialLocation: _center,
        zoomLevel: 11.0,
        locations: _jobStore.jobLocations,
        onMarkerTap: (id) 
          print('job id: $id');
          _jobStore.onItemClick(jobId: int.tryParse(id) ?? 0);
        ,
      ),
    );
  

颤振医生

macs-mbp:cubivue_app mac$ flutter doctor -v
[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.6 18G87, locale en-PK)
    • Flutter version 1.7.8+hotfix.4 at /Users/mac/Documents/flutter
    • Framework revision 20e59316b8 (7 weeks ago), 2019-07-18 20:04:33 -0700
    • Engine revision fee001c93f
    • Dart version 2.4.0


[✓] android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/mac/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for ios and macOS (Xcode 10.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.3, Build version 10G8
    • CocoaPods version 1.7.5

[✓] iOS tools - develop for iOS devices
    • ios-deploy 1.9.4

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 38.2.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] Connected device (1 available)
    • BV5500Pro • E535B1ZM960411E2 • android-arm • Android 9 (API 28)

• No issues found!

【参考方案1】：

是的，这是 2019 年 9 月的一个已知错误。

你可以在这里查看它的开发：https://github.com/flutter/flutter/issues/39797，并且有一个解决方法，你可以在等待地图时放置一些占位符。

return Container(
  height: size.height,
  width: size.width,
  child: Stack(
    children: <Widget>[
      GoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(37.4220, -122.0841),
          zoom: 15,
        ),
        onMapCreated: (GoogleMapController controller) =>
            setState(() => _mapLoading = false),
      ),
      (_mapLoading)
          ? Container(
              height: size.height,
              width: size.width,
              color: Colors.grey[100],
              child: Center(
                child: CircularProgressIndicator(),
              ),
            )
          : Container(),
    ],
  ),
);

【参考方案2】：

我使用以下代码作为解决方法，让地图有时间加载，并使用 animatedOpacity 提供平滑过渡，以便在加载时显示它。

// Declare variables

GoogleMapController? _googleMapController;
final Future<bool> _mapFuture = Future.delayed(const Duration(milliseconds: 1000), () => true);
bool isMapVisible = false;

// Build map using FutureBuilder

FutureBuilder
(
  future: _mapFuture,
  builder: (context, AsyncSnapshot<bool> snapshot)
  
    if(!snapshot.hasData)
    
      return const Center
      (
        child: CircularProgressIndicator()
      );
    

    return AnimatedOpacity
    (
      curve: Curves.fastOutSlowIn,
      opacity: isMapVisible ? 1.0 : 0,
      duration: const Duration(milliseconds: 600),
      child: GoogleMap
      (
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (controller) async
        
          _googleMapController = controller;

          Future.delayed
          (
            const Duration(milliseconds: 550),
            () => setState
            (()
              
                isMapVisible = true;
              
            )
          );
        ,
      ),
    );
  
),