Flutter google_maps_flutter如何将Android端定位按钮改为iOS样式

可以实现。由于google_maps_flutter默认的我的位置按钮直接调用了各平台原生谷歌地图SDK的内置组件，本身没有暴露跨平台统一样式的配置参数，因此最稳妥的方案是禁用默认按钮，自行实现自定义定位按钮，可以保证两端样式完全一致，还可灵活调整外观、图标、大小等属性。

具体实现步骤 #

1. 配置GoogleMap组件，关闭默认定位按钮，保留SDK内置定位能力

GoogleMap(
  // 其他基础配置参数
  myLocationEnabled: true, // 保留SDK内部的定位逻辑
  myLocationButtonEnabled: false, // 禁用默认的定位按钮
  onMapCreated: (GoogleMapController controller) {
    // 保存地图控制器实例，后续点击按钮时调用
    _mapController = controller;
  },
)

2. 使用Stack组件包裹地图，添加自定义定位按钮并固定在右下角

Stack(
  children: [
    GoogleMap(/* 填入上述GoogleMap配置 */),
    // 自定义iOS风格定位按钮
    Positioned(
      right: 16,
      bottom: 16,
      child: GestureDetector(
        onTap: () async {
          // 获取当前位置后移动地图视角
          LocationData currentLocation = await location.getLocation();
          _mapController?.animateCamera(
            CameraUpdate.newCameraPosition(
              CameraPosition(
                target: LatLng(currentLocation.latitude!, currentLocation.longitude!),
                zoom: 16,
              ),
            ),
          );
        },
        child: Container(
          width: 48,
          height: 48,
          decoration: const BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
            boxShadow: [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 4,
                offset: Offset(0, 2),
              ),
            ],
          ),
          child: const Icon(
            Icons.my_location,
            color: Colors.black87,
            size: 24,
          ),
        ),
      ),
    ),
  ],
)

注意事项 #

• 提前申请位置权限：Android端需申请ACCESS_FINE_LOCATION权限，iOS端需在Info.plist中添加NSLocationWhenInUseUsageDescription权限声明，否则定位功能无法正常使用
• 上述示例中使用了location第三方包获取当前位置，你也可以根据项目技术栈替换为其他位置获取库
• 如不想自定义按钮，也可以修改Android端原生谷歌地图SDK的配置调整内置按钮样式，但该方案需要修改原生层代码，依赖google_maps_flutter的内部实现逻辑，版本升级时可能出现兼容问题，不推荐使用

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