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

Question

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

\n\n

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

\n\n

代码

\n\n

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

\n\n

扑医生

\n\n

macs-mbp:cubivue_app mac$ flutter doctor -v\n[\xe2\x9c\x93] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.6 18G87, locale en-PK)\n    \xe2\x80\xa2 Flutter version 1.7.8+hotfix.4 at /Users/mac/Documents/flutter\n    \xe2\x80\xa2 Framework revision 20e59316b8 (7 weeks ago), 2019-07-18 20:04:33 -0700\n    \xe2\x80\xa2 Engine revision fee001c93f\n    \xe2\x80\xa2 Dart version 2.4.0\n\n\n[\xe2\x9c\x93] Android toolchain - develop for Android devices (Android SDK version 29.0.2)\n    \xe2\x80\xa2 Android SDK at /Users/mac/Library/Android/sdk\n    \xe2\x80\xa2 Android NDK location not configured (optional; useful for native profiling support)\n    \xe2\x80\xa2 Platform android-29, build-tools 29.0.2\n    \xe2\x80\xa2 Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java\n    \xe2\x80\xa2 Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)\n    \xe2\x80\xa2 All Android licenses accepted.\n\n[\xe2\x9c\x93] Xcode - develop for iOS and macOS (Xcode 10.3)\n    \xe2\x80\xa2 Xcode at /Applications/Xcode.app/Contents/Developer\n    \xe2\x80\xa2 Xcode 10.3, Build version 10G8\n    \xe2\x80\xa2 CocoaPods version 1.7.5\n\n[\xe2\x9c\x93] iOS tools - develop for iOS devices\n    \xe2\x80\xa2 ios-deploy 1.9.4\n\n[\xe2\x9c\x93] Android Studio (version 3.5)\n    \xe2\x80\xa2 Android Studio at /Applications/Android Studio.app/Contents\n    \xe2\x80\xa2 Flutter plugin version 38.2.3\n    \xe2\x80\xa2 Dart plugin version 191.8423\n    \xe2\x80\xa2 Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)\n\n[\xe2\x9c\x93] Connected device (1 available)\n    \xe2\x80\xa2 BV5500Pro \xe2\x80\xa2 E535B1ZM960411E2 \xe2\x80\xa2 android-arm \xe2\x80\xa2 Android 9 (API 28)\n\n\xe2\x80\xa2 No issues found!\n\n

\n

Answer 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(),
    ],
  ),
);

} }