如何解决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='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{Markers}
</MapContainer>
</div>
);
};
如果我能提供任何其他信息,请告诉我。谢谢。
解决方法
正如@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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。