React Leaflet 4.2.0 - 如何更改按钮单击时的缩放？

Question

**我想在 map 旁边添加一个按钮，点击后我将能够更改 map 的缩放。 ** 这在新版本的 react-leaflet 中可行吗？

示例场景：我显示国家的 map，缩放比例为 7，在 map 上方我有几个带有城市名称的按钮，单击按钮后，我想移动到这个地方并将缩放比例增加到 9。

我尝试使用 ref 并查看了文档，在旧版本中它有效。

使用 useState() 并更改缩放值就足够了。

Answer 1

好的，我需要使用 useRef() 和 flyTo。

const mapRef = useRef();
...

<button type="button" onClick={handleClick}> Warsaw </button>

<MapContainer center={position} zoom="7" ref={mapRef}>
...


const handleClick = () => {
  mapRef.current.flyTo([52.0121, 20.585842], 12);
};