Flutter集成google_maps_flutter 2.0.6后标记闪烁问题求助

嘿，我之前也碰到过这个标记时不时闪烁的坑，咱们来聊聊怎么搞定它！

问题根源 #

你现在用的是StatelessWidget，每次build方法执行时，都会重新创建整个markers集合以及里面的Marker实例。哪怕这些标记的位置和ID完全没变，Google Maps插件也会把它们当成全新的标记，重新渲染一遍——这就是闪烁的原因。

解决方案1：改用StatefulWidget缓存标记 #

把组件改成StatefulWidget，把markers集合存在State类里，这样每次build时不会重复创建这些标记实例，插件就不会误判为新标记了：

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

class RouteMapScreen extends StatefulWidget {
  const RouteMapScreen({Key? key}) : super(key: key);

  @override
  State<RouteMapScreen> createState() => _RouteMapScreenState();
}

class _RouteMapScreenState extends State<RouteMapScreen> {
  final LatLng _center = LatLng(49.975015, 9.146784);
  final Set<Marker> _markers = {
    Marker(
      markerId: const MarkerId("1"),
      position: const LatLng(49.9775, 9.1432),
    ),
    Marker(
      markerId: const MarkerId("2"),
      position: const LatLng(49.9785, 9.1432),
    )
  };

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      key: const Key("SingleRoute"),
      mapType: MapType.normal,
      markers: _markers,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 15.0,
      ),
    );
  }
}

解决方案2：使用const构造函数（静态标记场景） #

如果你的标记是固定不变的（位置、ID都不会改），可以用const关键字标记Marker和集合，让它们在编译时就确定实例，避免每次build重新创建：

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

class RouteMapScreen extends StatelessWidget {
  final LatLng _center = const LatLng(49.975015, 9.146784);
  final Set<Marker> _markers = const {
    Marker(
      markerId: MarkerId("1"),
      position: LatLng(49.9775, 9.1432),
    ),
    Marker(
      markerId: MarkerId("2"),
      position: LatLng(49.9785, 9.1432),
    )
  };

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      key: const Key("SingleRoute"),
      mapType: MapType.normal,
      markers: _markers,
      initialCameraPosition: const CameraPosition(
        target: LatLng(49.975015, 9.146784),
        zoom: 15.0,
      ),
    );
  }
}

额外提示 #

如果你的标记是动态的（比如位置会随业务逻辑更新），记得只在标记真正变化时调用setState更新_markers集合，不要在每次build都重新创建，这样就能避免不必要的闪烁啦。

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