javascript - 如何在 react-leaflet 中使用带有动态标记的边界

Question

我有以下功能性 react 组件，它在适合两个标记的“边界”框中正确显示两个静态标记。

我希望能够传递一组纬度和经度值以供 map 显示，但我不知道该怎么做。

这是工作的静态示例:

import React from 'react'
import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const MapLeaflet = () => {

// STATIC MARKER POSITIONS
const position = [42.2974279, -85.628292];
const position2 = [-8.852507, -45.351563];

// BOUNDS CODE
const bounds = L.latLngBounds([position, position2]);

return (
    <MapContainer
        className=" map"
        center={position}
        bounds={bounds}
    >
        <Marker key={key} position={position}>
            <Heart/>
        </Marker>
        <Marker key={key} position={position2}>
            <Heart/>
        </Marker>

        <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
    </MapContainer>
        
)
}

如果我传递的是 {coords}，我就可以动态显示标记:

const MapLeaflet = ({coors}) => {
...
    { coords && coords.map(coord => (
           <Marker key={key} latitude={coord[0]} longitude={coord[1]}>
                <SomeMarker/>
           </Marker>
    ))}
...
}

但显然， map 尚未将这些“坐标”考虑到边界。传入的coords数组的console.log输出如下:

0: (2) [51.52167056034225, -0.12894469488176763]
1: (2) [46.58635156377568, 2.1796793230151184]
2: (2) [40.819721, 14.341111]

不知何故，我需要以代码接受的格式将以下行替换为对传入坐标的引用，但我不知道该怎么做。

const bounds = L.latLngBounds([position, position2]);

类似于

const bounds = L.latLngBounds({coords});

非常感谢任何帮助。

亲切的问候，马特

Answer 1

我想我明白你想要达到的目标。

maxBounds 在 react-leaflet v.3 中是不可变的，因此您需要创建一个自定义组件，它将在坐标更改时更改 map 边界。它会以坐标为 Prop ，当坐标改变或comp着陆时，它会改变 map 边界。

function Bounds({ coords }) {
  const map = useMap();
  useEffect(() => {
    if (!map) return;

    map.fitBounds(coords);
  }, [map, coords]);
  return null;
}

在您的应用程序组件中，我包含了一个边界变化(坐标变量)并且 map 边界相应变化的情况。希望这就是您要找的。

function App() {
  const [coords, setCoords] = useState([
    [51.52167056034225, -0.12894469488176763],
    [46.58635156377568, 2.1796793230151184],
    [40.819721, 14.341111]
  ]);

  return (
    <>
      <MapLeaflet coords={coords} />
      <button
        onClick={() =>
          setCoords([
            [52.52167056034225, -0.12894469488176763],
            [47.58635156377568, 2.1796793230151184],
            [41.819721, 14.341111]
          ])
        }
      >
        Change coords
      </button>
    </>
  );
}

Demo