React-传单飞至新位置

Question

我有一个相当大的基于react和传单的应用程序。

问题是，当菜单关闭时，我无法将代码的主图移动到用户在输入菜单中提供的新位置。我不知道如何正确触发它，陷入了僵局。

以下是代码摘录：

我的主地图

                <MapContainer
                    style={{ width: '100vw', height: '100vh' }}
                    center={[
                        incident.editable.position._lat,
                        incident.editable.position._long,
                    ]}
                    zoom={13}
                    scrollWheelZoom={true}
                    zoomControl={false}
                >

关闭时应将主地图移动到新位置的对话框

            <Dialog
                maxWidth='md'
                fullWidth
                open={Boolean(showNewPosDialog)}
                onClose={() => { setShowNewPosDialog(false) }}
            >
                <DialogTitle sx={{ paddingTop: 1, paddingBottom: 0 }}>
                    <Typography variant='body1'>
                        You are setting a new position
                    </Typography>
                </DialogTitle>
                <Autocomplete
                    freeSolo
                    options={locationList}
                    getOptionLabel={(option) => option.label}
                    value={location}
                    onChange={(evt, newValue) => {
                        setLocationList([]);
                        if (newValue) {
                            setPosition(new GeoPoint(newValue.y, newValue.x));
                        } else {
                            setPosition(null);
                        }
                        setLocation(newValue);
                        if (
                            evt.target.value !==
                            incidentData.editable.location
                        ) {
                            setAllowSave(true);
                        }
                    }}
                    fullWidth
                    sx={{ marginBottom: 2 }}
                    renderInput={(params) => (
                        <TextField
                            {...params}
                            label='Lokasjon (sted/kommune)'
                            onChange={(evt) => {
                                handleGeoSearch(evt);
                            }}
                            variant='outlined'
                        />
                    )}
                />
                <Grid container spacing={2}>
                    <Grid item xs={12}>
                        <Typography variant='body1'>
                            Move markers on the map
                        </Typography>
                    </Grid>
                    <Grid item xs={12}>
                        <MapContainer
                            center={[58.5, 7.9]}
                            zoom={8}
                            scrollWheelZoom={true}
                            style={{ height: '35vh' }}
                        >
                            <TileLayer
                                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                            />
                            {position && (
                                <Marker
                                    position={[position._lat, position._long]}
                                />
                            )}
                            <MyComponent
                                position={position}
                            />
                        </MapContainer>
                    </Grid>
                </Grid>

该应用程序相当大，因此如果需要更多信息，请告诉。

我尝试使用变量来使用 useMap 挂钩在组件中引发地图更改：

function MyComponent(props) {
    const map = useMap();
    if (props.position) {
        map.flyTo({ lat: props.position._lat, lng: props.position._long }, 12);
    }
    return null;
}

Answer 1

下面是我使用的代码。尝试添加使用效果。 如果这不起作用，我会调查您在该位置设置的数据是否正确。位置是否正确传递给组件并且坐标是否正确？

import React, { useEffect } from "react";
import { useMap } from "react-leaflet";

export interface LeafletFlyToProps {
  latitude?: number;
  longitude?: number;
  zoom?: number;
}

const LeafletFlyTo: React.FC<LeafletFlyToProps> = ({
  latitude,
  longitude,
  zoom = 17,
}) => {
  const map = useMap();

  useEffect(() => {
    if (latitude && longitude) {
      map.flyTo([latitude, longitude], zoom);
    }
  }, [latitude, longitude, map, zoom]);

  return null;
};

export default LeafletFlyTo;