google-maps - 如何设置谷歌地图的大小不与 BottomNavigationBar 重叠

Question

我有以下代码来设置 map 叠加层的大小。请注意，宽度是根据 MediaQuery 设置的。高度也是这样设置的，但它总是覆盖底部导航栏

void buildMap() async {
if (mapOverlayController != null) return;

var mq = MediaQuery.of(context);
// add delay so overlay is positioned correctly
await new Future<Null>.delayed(new Duration(milliseconds: 20));

mapOverlayController = GoogleMapOverlayController.fromSize(
  width: mq.size.width,
  height: 300.0,
  options: GoogleMapOptions(
    trackCameraPosition: true,
  ),
);
mapOverlayController.mapController.addListener(_onMapChanged);
mapOverlayController.overlayController.activateOverlay();
setState(() {});
 }

 Widget renderMap() {
if (mapOverlayController == null) {
  return Center(
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: 150.0,
              width: 150.0,
              child: new CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Colors.redAccent),
                value: null,
                strokeWidth: 7.0,
              ),
            ),
            new Container(
              margin: const EdgeInsets.only(top: 25.0),
              child: new Center(
                child: new Text(
                  "Loading.. please wait...",
                ),
              ),
            ),
          ]));
} else {
  return GoogleMapOverlay(controller: mapOverlayController);
}
}

我希望 map 的高度包括 map 栏下方和底部导航栏上方的所有区域

Answer 1

不幸的是，那些 Google Map 包没有集成到 Flutter 的小部件树中，只是作为原生 View 卡在 Flutter View 之上。

根据您的用例，如果您只需要 map 图像(上面有标记或区域)，您可以使用 Google static maps api ，调用他们的 HTTP 端点并获取返回的图像。

如果您确实需要可调整的 map ，则需要根据需要修改 native 代码本身。