[英]React Leaflet 4.2.0 - how to change zoom on button click?
**I would like to add a button next to the map, after clicking which I will be able to change the zoom of the map. ** Is this feasible in the new version of react-leaflet? **我想在 map 旁边添加一个按钮,点击后我将能够更改 map 的缩放。 ** 这在新版本的 react-leaflet 中可行吗?
Example scenario: I display a map of the country with zoom 7, above the map I have a few buttons with the names of cities, after clicking on the button, I would like to move to this place and increase the zoom to 9.示例场景:我显示国家的 map,缩放比例为 7,在 map 上方我有几个带有城市名称的按钮,单击按钮后,我想移动到这个地方并将缩放比例增加到 9。
i tried using ref and looked at the documentation, in older versions it worked.我尝试使用 ref 并查看了文档,在旧版本中它有效。
It was enough to use useState() and change the zoom value.使用 useState() 并更改缩放值就足够了。
Ok, i needed to use useRef() and flyTo.好的,我需要使用 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);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.