React Leaflet 弹出窗口不适用于移动设备

Question

我在应用程序中使用react-leaflet，除非从移动设备（物理设备和开发工具）查看它，否则它会按预期工作。在移动设备上，弹出窗口将出现并在大约 0.2 秒后立即消失。

一些注意事项

• 如果我通过 Chrome 开发工具刷新移动设备上的页面，然后切换到常规视图，则问题仍然存在。
• 发生此问题时，MapContainer 似乎检测到了两个单击事件。这些点击事件之一有isTrusted: flase, _simulated: true. 我认为这可能是问题的根源。
• 单击弹出窗口时，可以在开发工具中观察到以下 div 有一个子级，该子级立即被删除。<div class="leaflet-pane leaflet-popup-pane"></div>

这是CodeSandbox中复制的问题。如果您单击按钮弹出浏览器窗口，在开发工具中将其切换为以移动设备查看，然后刷新页面，您可以看到会发生什么。

我的组件如下所示：

  export const MapView: React.FC<IMapViewProps> = ({
  ...
}) => {
 
  const Markers = data.map(({ location, name, id, events }) => (
    <Marker
      position={[location.lat, location.lon]}
      key={id}
      eventHandlers={{
        click: () => {
          console.log("clicked"); // THIS FIRES TWICE
        },
      }}
    >
      <Popup>
        <span>{name}</span>
      </Popup>
    </Marker>
  ));
    
  return (
    <div>
      <div>
        <br></br>
       IF I TAP HERE ONLY ONE CLICK EVENT IS RECORDED SO IT MUST BE IN THE MAPCONTAINER
        <br></br>
      </div>
      <MapContainer
        center={[55.9533, -3.1883]}
        zoom={10}
        scrollWheelZoom={false}
        style={{ height: "100vh" }}
        className={styles.container}
        doubleClickZoom
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {Markers}
      </MapContainer>
    </div>
  );
};

如果我可以提供任何其他信息，请告诉我。谢谢。

Answer 1

正如 @SethLutske 指出的，这个问题似乎源于leaflet。

添加tap={false}到MapContainer似乎已经解决了这个问题。

 <MapContainer
    center={[55.9533, -3.1883]}
    zoom={10}
    scrollWheelZoom={false}
    style={{ height: "100vh" }}
    className={styles.container}
    doubleClickZoom
    tap={false}
  >
     ...
  </MapContainer>