Closed ulad-f closed 3 years ago
@aspirin-vd как-то так:
export default function App() {
const [zoom, setZoom] = useState(9);
return (
<div>
<YMaps>
<Map state={{ center: [55.751574, 37.573856], zoom }} />
</YMaps>
<div>
<button onClick={() => setZoom(zoom + 1)}>Zoom in</button>
<button onClick={() => setZoom(zoom - 1)}>Zoom out</button>
</div>
</div>
);
}
@aspirin-vd как-то так:
export default function App() { const [zoom, setZoom] = useState(9); return ( <div> <YMaps> <Map state={{ center: [55.751574, 37.573856], zoom }} /> </YMaps> <div> <button onClick={() => setZoom(zoom + 1)}>Zoom in</button> <button onClick={() => setZoom(zoom - 1)}>Zoom out</button> </div> </div> ); }
У меня на данный момент так реализовано, но анимации отдаления и приближения карты нет, а хотелось бы её добавить
@aspirin-vd я вас понял. Придется тогда так:
export default function App() {
const map = React.useRef(null);
const [zoom, setZoom] = useState(9);
useEffect(() => {
if (map.current) {
map.current.setZoom(zoom, { duration: 300 });
}
}, [zoom]);
return (
<div>
<YMaps>
<Map
instanceRef={map}
defaultState={{ center: [55.751574, 37.573856], zoom: 9 }}
/>
</YMaps>
<div>
<button onClick={() => setZoom(zoom + 1)}>Zoom in</button>
<button onClick={() => setZoom(zoom - 1)}>Zoom out</button>
</div>
</div>
);
}
Благодарю
Как изменять zoom своими кнопками и при этом что бы была анимация как при нажатии на стандартные кнопки? Пример react api: https://yandex.com/dev/maps/jsbox/2.1/zoom_layout