如何通过GetX跨类调用GoogleMap的onMapCreated并修复animateCamera失效

核心问题分析 #

1. 控制器重名混淆：自定义的GetX控制器和谷歌地图的GoogleMapController同名，导致你调用的animateCamera是自定义控制器的方法（而这个方法根本不存在），自然不会生效。
2. 未保存原生地图控制器：onMapCreated回调没有把谷歌地图的原生控制器实例保存到GetX控制器中，导致无法在其他类中调用地图的原生方法。
3. 标记集合未响应式更新：直接操作普通Set<Marker>不会触发GetBuilder的UI重建，修改标记后地图不会同步更新。

解决步骤与修改后代码 #

1. 重命名GetX控制器，避免冲突 #

把自定义的GoogleMapController改名为MapController，彻底避免和谷歌地图的控制器混淆。

2. 在GetX控制器中保存原生地图控制器 #

添加变量存储谷歌地图的GoogleMapController实例，并提供方法更新位置和标记。

3. 把标记集合改为响应式类型 #

使用RxSet<Marker>替代普通Set<Marker>，确保修改标记时自动触发UI更新。

4. 正确传递onMapCreated回调 #

在GoogleMapView中把原生地图控制器传递给GetX控制器，让控制器持有实例。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:get/get.dart';

class GoogleMapPage extends StatelessWidget {
  const GoogleMapPage({super.key});

  static const LatLng googlePlex = LatLng(8.242876, 124.243513);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Map'),
        backgroundColor: Colors.blue[50],
      ),
      body: const GoogleMapView(),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () async {
          try {
            Position position = await _determinedPosition();
            final mapController = Get.find<MapController>();
            
            // 更新标记并触发地图动画
            mapController.updateMarkers(
              Marker(
                markerId: const MarkerId('currentLocation'),
                position: LatLng(position.latitude, position.longitude),
              ),
            );
            mapController.animateToPosition(
              LatLng(position.latitude, position.longitude),
              zoom: 17,
            );
          } catch (e) {
            Get.snackbar('错误', e.toString());
          }
        },
        label: const Text('Current Location'),
        elevation: 0.0,
        icon: const Icon(Icons.location_history),
        backgroundColor: const Color.fromARGB(250, 133, 20, 26),
        foregroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(28.0),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

  Future<Position> _determinedPosition() async {
    bool serviceEnabled;
    LocationPermission permission;

    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      throw '定位服务已关闭';
    }

    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        throw '定位权限被拒绝';
      }
    }

    if (permission == LocationPermission.deniedForever) {
      throw '定位权限被永久拒绝，请在设置中开启';
    }
    return Geolocator.getCurrentPosition();
  }
}

// 重命名GetX控制器，避免和谷歌地图的GoogleMapController冲突
class MapController extends GetxController {
  final CameraPosition initialCameraPosition = const CameraPosition(
    target: GoogleMapPage.googlePlex,
    zoom: 17,
  );

  // 使用响应式集合存储标记，修改时自动触发UI更新
  final RxSet<Marker> markers = <Marker>{
    const Marker(
      markerId: MarkerId('sourceLocation'),
      icon: BitmapDescriptor.defaultMarker,
      position: GoogleMapPage.googlePlex,
    ),
  }.obs;

  var mapType = Rx<MapType>(MapType.normal);

  // 存储谷歌地图的原生控制器实例
  GoogleMapController? _googleMapController;

  // 保存原生控制器
  void setGoogleMapController(GoogleMapController controller) {
    _googleMapController = controller;
  }

  // 更新标记方法
  void updateMarkers(Marker newMarker) {
    markers.clear();
    markers.add(newMarker);
  }

  // 地图动画方法
  void animateToPosition(LatLng position, {double zoom = 17}) {
    _googleMapController?.animateCamera(
      CameraUpdate.newLatLngZoom(position, zoom),
    );
  }
}

class GoogleMapView extends StatelessWidget {
  const GoogleMapView({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MapController>(
      init: MapController(),
      builder: (controller) {
        return GoogleMap(
          initialCameraPosition: controller.initialCameraPosition,
          // 绑定响应式标记集合
          markers: controller.markers.value,
          zoomControlsEnabled: false,
          onMapCreated: (googleMapController) {
            // 将原生控制器传递给GetX控制器保存
            controller.setGoogleMapController(googleMapController);
          },
          onTap: (position) {
            // 点击地图更新位置示例
            controller.updateMarkers(
              Marker(
                markerId: MarkerId(position.toString()),
                position: position,
              ),
            );
            controller.animateToPosition(position);
          },
          mapType: controller.mapType.value,
          myLocationEnabled: true,
          myLocationButtonEnabled: false,
          compassEnabled: true,
          trafficEnabled: false,
          buildingsEnabled: true,
          mapToolbarEnabled: true,
          rotateGesturesEnabled: true,
          scrollGesturesEnabled: true,
          tiltGesturesEnabled: true,
          zoomGesturesEnabled: true,
        );
      },
    );
  }
}

class GoogleMapBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<MapController>(() => MapController());
  }
}

关键改动说明 #

• 控制器分离：把GetX的业务控制器和谷歌地图的原生控制器彻底分开，避免重名混淆。
• 原生控制器存储：通过setGoogleMapController方法把谷歌地图的控制器实例保存到GetX控制器中，这样任何能拿到GetX控制器的地方都能调用地图的原生方法（比如animateCamera）。
• 响应式标记：用RxSet存储标记，修改时自动触发GetBuilder重建地图，确保标记实时更新。
• 封装动画方法：在GetX控制器中封装animateToPosition方法，对外提供简洁的调用接口，不用直接操作原生控制器。

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