3

我在尝试使用react-leaflet'bounds属性时遇到了问题。我的用例是我的应用程序在状态中定义了一些初始边界（比如说，回退边界），并且这些边界在组件的第一次渲染期间传递。应用程序架构要求我发送请求以在组件内设置新边界，问题就来了。

在下面的示例中（我使用 模拟 AJAX 请求setTimeout）我们可以注意到，在超时后来自请求的新边界根本没有设置，我不太确定它为什么会发生。

我怀疑这与动画有关，因为当超时延迟增加时，问题不会发生，并且第二个边界设置正确。

我的设置：

"react": "17.0.0"
"leaflet": "1.6.0"
"react-leaflet": "2.7.0"

import React, { useState } from "react";
import { Map, ZoomControl, TileLayer } from "react-leaflet";

import "./styles.css";
import "leaflet/dist/leaflet.css";

export default function App() {
  const [bounds, setBounds] = useState([
    [75, -25],
    [30, 45]
  ]);

  setTimeout(() => {
    setBounds([
      [59.569068610511465, 10.387057922780514],
      [59.565111563593824, 10.397184267640114]
    ]);
  }, 200);

  return (
    <Map
      bounds={bounds}
      maxBounds={bounds}
      zoomControl={false}
      style={{
        height: 400,
        width: 400
      }}
    >
      <TileLayer
        url="//{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
        maxZoom={21}
        minZoom={4}
        minZoomIsDrawing={18}
        subdomains={["mt0", "mt1", "mt2", "mt3"]}
      />
      <ZoomControl />
    </Map>
  );
}

现场示例：https ://codesandbox.io/s/keen-silence-vnt23

4

1 回答 1

1

您需要使用效果来获取地图实例以更改地图边界。

在这里查看更多信息。

const mapRef = useRef(null);

  useEffect(() => {
    const map = mapRef.current?.leafletElement;
    map.fitBounds([
      [59.569068610511465, 10.387057922780514],
      [59.565111563593824, 10.397184267640114]
    ]);
  }, []);

演示

于 2020-11-09T11:59:57.710 回答