javascript - React Leaflet 弹出窗口在移动设备上不起作用

问题描述

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

需要注意的几点

如果我通过 chrome 开发工具刷新移动设备上的页面，然后切换到常规视图，则问题仍然存在。
发生此问题时，MapContainer 似乎检测到两个单击事件。这些点击事件之一具有isTrusted: flase, _simulated: true. 我认为这可能是问题的途径。
单击弹出窗口时，可以在 devtools 中观察到以下 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>
  );
};

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

标签： javascriptreactjsonclickleafletreact-leaflet

正如@SethLutske 指出的那样，这个问题似乎源于传单。

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

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

javascript - React Leaflet 弹出窗口在移动设备上不起作用

问题描述

解决方案

推荐阅读