Блог

У меня есть карта react-map-gl. Я изменяю координаты центра извне. Но изменения не видны на карте. Если я использую useEffect (я прокомментировал это в приведенном примере кода), то карта правильно центрирована. Но я не могу использовать навигационный контроль. Я также думаю, что это не лучший способ. Как я могу сделать так, чтобы изменения, происходящие за пределами окна просмотра, были видны на карте?

 const Map = (props) => {
  const mapstyle =
    "https://api.maptiler.com/maps/streets/style.json?key="  
    process.env.REACT_APP_MAP_TOKEN;

  const c = props.center.split(",");

  const [mapViewportBig, setMapViewportBig] = useState({
    height: "50vh",
    width: "50vw",
    longitude: parseInt(c[1]),
    latitude: parseInt(c[0]),
    zoom: 4,
  });

  const [mapViewportSmall, setMapViewportSmall] = useState({
    height: "25vh",
    width: "25vw",
    longitude: parseInt(c[1]),
    latitude: parseInt(c[0]),
    zoom: 10,
  });
/*
  useEffect(() => {
    setMapViewportBig({
      height: "50vh",
      width: "50vw",
      longitude: parseInt(c[1]),
      latitude: parseInt(c[0]),
      zoom: 4,
    });
  }, [mapViewportBig]);
*/
  return (
    <>
      <ReactMapGL
        {...mapViewportSmall}
        mapStyle={mapstyle}
        onViewportChange={setMapViewportSmall}
      >
        <NavigationControl />
      </ReactMapGL>
      <ReactMapGL
        {...mapViewportBig}
        mapStyle={mapstyle}
        onViewportChange={setMapViewportBig}
      >
        <NavigationControl onViewportChange={setMapViewportBig} />
        {props.list.map((marker) => (
          <Marker
            offsetTop={-48}
            offsetLeft={-24}
            latitude={parseInt(marker.lat)}
            longitude={parseInt(marker.lon)}
          >
            <img src={marker.icon} />
          </Marker>
        ))}
      </ReactMapGL>
    </>
  );
};