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

Question

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

一些注意事项

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

这里是 CodeSandbox 中重复的问题。如果点击按钮弹出浏览器window，在开发者工具中将其切换为移动设备查看，然后刷新页面，就可以看到发生了什么。

我的组件如下所示：

  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>

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

React Leaflet popups not working on mobile devices

javascript

onclick

leaflet

reactjs

react-leaflet