Flutter iOS应用添加google_maps_flutter标记后地图平移卡顿问题

问题描述 #

在iPhone 14 Pro的Release模式下，集成google_maps_flutter组件后出现以下性能异常：

• 添加单个Marker后，手指滑动地图并松开，地图的惯性平移动画出现明显卡顿
• 按住屏幕拖动地图时平移流畅，移除Marker后惯性平移也恢复正常

测试代码如下：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: 'My App'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Completer<GoogleMapController> _controller =
      Completer<GoogleMapController>();

  static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static const CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        markers: {
          const Marker(
            markerId: MarkerId('marker_1'),
            position: LatLng(37.42796133580664, -122.085749655962),
          ),
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: const Text('To the lake!'),
        icon: const Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}

解决方案 #

1. 升级google_maps_flutter到最新稳定版 #

这类iOS平台的渲染卡顿问题多为组件版本的已知bug，优先升级到最新版本，官方通常会在迭代中修复性能问题。

2. 预加载自定义Marker图标 #

默认Marker的实时渲染可能带来额外开销，尝试使用预加载的自定义图标替代默认Marker：

BitmapDescriptor? _customMarker;

@override
void initState() {
  super.initState();
  _loadCustomMarker();
}

Future<void> _loadCustomMarker() async {
  _customMarker = await BitmapDescriptor.fromAssetImage(
    const ImageConfiguration(size: Size(48, 48)),
    'assets/marker_icon.png', // 替换为你的自定义Marker图标路径
  );
}

// 在GoogleMap的markers中使用
markers: {
  Marker(
    markerId: const MarkerId('marker_1'),
    position: const LatLng(37.42796133580664, -122.085749655962),
    icon: _customMarker ?? BitmapDescriptor.defaultMarker,
  ),
},

3. 关闭Marker碰撞检测 #

默认开启的Marker碰撞检测在iOS上可能产生性能损耗，若业务不需要该功能，可关闭：

GoogleMap(
  // 其他配置...
  markers: {
    Marker(
      markerId: const MarkerId('marker_1'),
      position: const LatLng(37.42796133580664, -122.085749655962),
      consumesTapEvents: true, // 配合关闭碰撞检测的配置
    ),
  },
  // 若使用最新版本组件，可直接设置：
  // markerCollisionBehavior: MarkerCollisionBehavior.ignore,
)

4. 配置iOS端Metal渲染加速 #

在iOS项目的Info.plist中添加以下配置，强制优先使用原生平台视图渲染：

<key>io.flutter.embedded_views_prefer_native_platform</key>
<true/>

同时在AppDelegate.swift中开启Google Maps的Metal渲染：

import GoogleMaps

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  GMSServices.provideAPIKey("你的Google Maps API Key")
  GMSServices.setMetalRendererEnabled(true)
  return true
}

5. 简化Marker属性 #

避免给Marker设置过多动态属性（如实时旋转、透明度动画等），保持Marker的属性简洁，减少渲染时的计算量。

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