如何将谷歌地图的大小设置为不重叠BottomNavigationBar

Posted 2023-02-23

【中文标题】如何将谷歌地图的大小设置为不重叠BottomNavigationBar

【英文标题】：How to set the size of google maps to not overlap BottomNavigationBar

【发布时间】：2018-12-13 10:38:19

【问题描述】：

我有以下代码来设置地图叠加层的大小。请注意，宽度是基于 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);

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

【参考方案1】：

不幸的是，那些 Google Map 包没有集成到 Flutter 的小部件树中，只是作为原生视图挂在 Flutter 视图的顶部。

根据您的用例，如果您只需要地图图像（带有标记或区域），您可以使用Google static maps api，调用他们的 HTTP 端点并返回图像。

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