点击地图标记上的颤动在 iOS 设备中不起作用

Question

当使用 flutter_map 和 flutter_map_marker_cluster 构建带有标记的地图时，我遇到一个问题，有时但在相当长的持续时间内 onTap 不再工作，但它只发生在 iOS 设备中。在android和iOS模拟器中都可以正常工作。

Flutter Map {
   layers: [
        // Layer map cluster marker ---> HERE
        MapCluster.getMapCluster(mapStateNotifier, mapState),
      ],
   children: [
        // map tile layer
        TileLayerWidget(),

        // Location user marker
        CircleLayerWidget(),

        // Compass marker
        MarkerLayerWidget(),
      ],
}

// inside method MapCluster.getMapCluster 
return MarkerClusterLayerOptions(
    // void Function(Marker)?
    onMarkerTap: (Marker marker) {
        // ---> HERE
        // show popup
    }

);

我已经尝试过了

1. 增加标记尺寸

2. 删除其他图层，仅标记图层

3. Flutter 标记集群包中的搜索问题

我意识到，当我点击设备时，运行调试甚至不会跳转到 onMarkerTap 方法内的断点。有时它显示得很流畅，有时它很滞后，即使我触摸了多少次，它不依赖于放大/缩小、转到后台或同步/异步。

因为只有 iOS 设备有问题，我认为在 iOS 中处理手势 onTap 时，2 个包 flutter map 和 flutter mark cluster 发生冲突，但我还没有找到任何证据。

Answer 1

终于，我想通了。原因是在使用 FlutterCompass 时，我在

init state

中调用了 StreamSubscription，并且在旋转或摇动手机时总是会调用它。

  _compassStream = FlutterCompass.events?.listen((event) {
       // update state with new value event.heading
  });

解决方案：

• 指南针小部件的单独状态管理
• 第一次初始化，使用标志变量适当暂停和恢复。

Answer 2

我在 Android 设备上也遇到了同样的问题。关于@Quyen的答案，您可以轻松地将指南针转移到自己的类中并在构建方法中调用它。

指南针：

import 'dart:math';

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

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

  @override
  State<Compass> createState() => _CompassState();
}

class _CompassState extends State<Compass> {
  double _heading = 0.0;
  @override
  void initState() {
    super.initState();
    _initCompass();
  }

  void _initCompass() {
    FlutterCompass.events?.listen((CompassEvent event) {
      setState(() {
        _heading = event.heading!;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topRight,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Transform.rotate(
          angle: (_heading * (pi / 180) * -1),
          child: Transform.rotate(
            angle: 0.75,
            child: //Here comes a Icon or whatever you wanna use
          ),
        ),
      ),
    );
  }
}

任何其他课程：

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'compass.dart'
class SimpleMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          FlutterMap(
            options: MapOptions(
              center: LatLng(51.5, -0.09),
              zoom: 13.0,
            ),
            layers: [
              TileLayerOptions(
                urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c'],
              ),
            ],
          ),
          Positioned(
            top: 10,
            right: 10,
            child: Compass(),
          ),
        ],
      ),
    );
  }
}