在移动设备上拖动地图时传单控件消失（反应）

Question

目前正在使用 React-Leaflet 绘制地图。在桌面上一切正常，但在移动设备上（iPhone X）移动地图时图层控制和缩放控制flicker/disappear。

    function Osm() {
        const [map, setMap] = useState(null)
        return (<main>
            {map ? <header><img src={logo} />map <img id={'loc'} src={currentLoc} onClick={(e) => goToLoc(map)} /></header> : null}
            <MapContainer center={center as any} zoom={13} style={{ height: "100vh" }} zoomAnimation={false} fadeAnimation={false} markerZoomAnimation={false} doubleClickZoom={false}
                scrollWheelZoom={true} zoomControl={false} attributionControl={false} whenCreated={(map) => setMap(map as any)}>
                <TileLayer
                    attribution='<a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>'
                    url="https://api.maptiler.com/maps/streets/256/{z}/{x}/{y}.png?key="
                    maxZoom={19}
                    minZoom={12}
                />
    
                <LayersControl position="topright" collapsed={false}>
                    <LayersControl.BaseLayer name="E5" checked>
                        <FeatureGroup key={'e5'}>
                            <TankstellenNoReactQuery fuel={'e5'} />
                        </FeatureGroup >
                    </LayersControl.BaseLayer >
                    <LayersControl.BaseLayer name="E10" >
                        <FeatureGroup key={'e10'}>
                            <TankstellenNoReactQuery fuel={'e10'} />
                        </FeatureGroup >
                    </LayersControl.BaseLayer>
                    <LayersControl.BaseLayer name="Diesel" >
                        <FeatureGroup key={'diesel'}>
                            <TankstellenNoReactQuery fuel={'diesel'} />
                        </FeatureGroup >
                    </LayersControl.BaseLayer>
                </LayersControl>
                <ZoomControl position='topleft' />
                {/* <ScaleControl metric={true} imperial={false} /> */}
                <AttributionControl position='bottomleft' prefix={false} />
                <MapHandler />
            </MapContainer>
        </main >
        )
    }

对于 <main> 我使用了 display: flex with height: 100vh。但我不认为这是问题的根源。这可能是 webkit 浏览器的问题还是其他问题。据我测试，它只发生在移动设备上。

感谢您的帮助

卡罗

Answer 1

正如Falke Design所说，目前这个包的问题只影响 safari。

github.com/Leaflet/Leaflet/issues/8068

在移动设备上拖动地图时传单控件消失（反应）

Leaflet control disapperars while dragging map on mobile(React)

javascript

reactjs

leaflet

openstreetmap

react-leaflet