Question

我在应用程序中使用 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>
  );
};

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

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 弹出窗口不适用于移动设备

1 个答案: