google_maps_flutter在iOS端不显示缩放及路线按钮问题求助

这是Google Maps SDK的平台原生差异导致的默认行为不一致，和基础配置无关：

• zoomControlsEnabled参数仅对Android平台生效，iOS原生Google Maps SDK未提供内置缩放控制按钮，所以即使设为true也不会显示
• 点击地图弹出的路线相关操作工具栏由toolbarEnabled参数控制，Android端默认开启，iOS端默认关闭，所以iOS点击POI/地图点位不会弹出对应按钮

1. 开启iOS端路线工具栏 #

在GoogleMap构造参数中主动添加toolbarEnabled: true即可，修正后的地图创建代码如下：

GoogleMap createGoogleMap(
    double latitude, double longitude, Set<Marker> markers) {

  return GoogleMap(
    mapType: MapType.normal,
    initialCameraPosition: initialPos,
    zoomControlsEnabled: true, // 仅Android生效，保留不影响iOS
    toolbarEnabled: true, // 新增这一行，开启iOS端点击POI后的操作工具栏
    onMapCreated: (GoogleMapController controller) {
      _controller.complete(controller);
      _googleMapController = controller;
    },
    markers: markers.isEmpty ? <Marker>{} : markers,
  );
}

2. 自定义实现iOS端缩放控制按钮 #

iOS端没有内置缩放按钮，需要自己在地图层上叠加自定义缩放按钮实现功能，参考实现代码：

Stack(
  children: [
    createGoogleMap(latitude, longitude, markers),
    // 自定义缩放按钮组，可调整位置放在页面任意区域
    Positioned(
      right: 16,
      bottom: 100,
      child: Column(
        children: [
          FloatingActionButton(
            mini: true,
            child: Icon(Icons.add),
            onPressed: () {
              _googleMapController?.animateCamera(CameraUpdate.zoomIn());
            },
          ),
          SizedBox(height: 8),
          FloatingActionButton(
            mini: true,
            child: Icon(Icons.remove),
            onPressed: () {
              _googleMapController?.animateCamera(CameraUpdate.zoomOut());
            },
          ),
        ],
      ),
    )
  ],
)

如果要实现和Android一致的点击地图才显示缩放按钮的效果，增加状态变量监听onTap回调，控制按钮的显示/隐藏逻辑即可。

内容的提问来源于stack exchange，提问作者Rafael