时间戳

首页 > 解决方案 > Google Maps Flutter：加载地图之前出现黑屏

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

问题描述

我在加载地图之前出现黑屏，我尝试在 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!

标签： androidiosgoogle-mapsflutter

解决方案

是的，这是 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(),
    ],
  ),
);

} }

推荐阅读