Flutter中如何动态设置Google Maps缩放级别以同时显示两个标记（无需滚动）

嘿，我完全懂你的需求——不管用户和宠物的位置离得远还是近，都想让地图自动调整到合适的缩放级别，把两个标记完整显示在屏幕里，不用用户手动滚动对吧？别担心，咱们不用自己算复杂的距离和缩放公式，Google Maps Flutter插件自带的工具就能轻松搞定！

核心思路 #

Google Maps提供了CameraUpdate.newLatLngBounds方法，它能根据你传入的坐标边界范围，自动算出最合适的地图中心点和缩放级别，确保整个边界区域都能显示在屏幕内。我们只需要把用户和宠物的两个坐标转换成一个边界范围，再让地图相机适配这个范围就行。

具体实现步骤 #

1. 保存地图控制器实例

首先得拿到GoogleMapController，这样才能控制地图的相机位置。给GoogleMap组件加上onMapCreated回调来保存控制器：

GoogleMapController? _mapController;

// ...

GoogleMap(
  onMapCreated: (controller) {
    _mapController = controller;
    // 地图加载完成后，立即调整到适配两个标记的位置
    _adjustMapToFitBothMarkers();
  },
  initialCameraPosition: CameraPosition(
    target: LatLng(userLatitude, userLongitude),
    zoom: 15.0, // 这只是初始占位，之后会被自动计算的值覆盖
  ),
  markers: _markers,
  // 其他地图配置...
)

2. 编写适配逻辑

接下来写一个方法，用来创建包含两个标记的边界，并让地图相机适配这个边界：

void _adjustMapToFitBothMarkers() {
  // 先判断控制器是否已初始化
  if (_mapController == null) return;

  // 把用户和宠物的坐标转换成LatLng对象
  final userLatLng = LatLng(userLatitude, userLongitude);
  final petLatLng = LatLng(petLatitude, petLongitude);

  // 创建包含两个点的边界范围
  final bounds = LatLngBounds.fromPoints([userLatLng, petLatLng]);

  // 生成相机更新指令，第二个参数是padding（标记和屏幕边缘的距离，避免被切掉）
  final cameraUpdate = CameraUpdate.newLatLngBounds(bounds, 50);

  // 执行相机动画，平滑过渡到目标位置
  _mapController!.animateCamera(cameraUpdate);
}

3. 位置更新时重新适配

如果之后用户或者宠物的位置发生了变化，只需要再次调用_adjustMapToFitBothMarkers()方法，地图就会自动重新调整缩放和中心点啦！

一些实用细节 #

• Padding参数：newLatLngBounds的第二个padding参数很重要，建议设置一个合适的值（比如50），这样标记不会紧贴屏幕边缘，体验更好；如果你的页面底部有导航栏或者顶部有AppBar，还可以把对应方向的padding调大，避免标记被UI组件遮挡。
• 重合点处理：如果用户和宠物的位置完全重合，这个方法也能正常工作，地图会自动设置一个合适的默认缩放级别。
• 动画 vs 直接跳转：如果不想用动画过渡，把animateCamera换成moveCamera就行，地图会直接跳转到目标位置。

备注：内容来源于stack exchange，提问作者Hasti Vaghani