Как сделать масштабируемый зум для маркеров leaflet?

Question

[Ruslan_Malsagov]

Всем привет! У меня есть список маркеров. По два маркера в одной строке. Мне нужно что бы при нажатии на одну строку (появляются два маркера на карте) у меня карта масштабировалась сама на эти два маркера, что бы эти два маркера попали в экран. Перепробовал кучу вариантов, но ничего не получается. Я использую react-leaflet.

import React from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import { useSelector } from "react-redux";

const Map = () => {
  L.Icon.Default.imagePath = "https://unpkg.com/leaflet@1.5.0/dist/images/";

  const currentRoutes = useSelector((state) => state.route.currentRoute);
  const { loadingLat, loadingLng, unloadingLat, unloadingLng } = currentRoutes;
  return (
    <div>
      <MapContainer
        center={
          loadingLat !== undefined
            ? [loadingLat, loadingLng]
            : [59.84660399, 30.41705607]
        }
        zoom={10}
        style={{ width: "100vw", height: "100vh" }}
        scrollWheelZoom={true}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {loadingLat !== undefined ? (
          <>
            <Marker position={[loadingLat, loadingLng]}>
              <Popup>Погрузка</Popup>
            </Marker>
            <Marker position={[unloadingLat, unloadingLng]}>
              <Popup>Разгрузка</Popup>
            </Marker>
          </>
        ) : null}
      </MapContainer>
    </div>
  );
};

export default Map;

Answer 1

[freeExec]

map.fitBounds()