Почему не работает плавное перемещение по карте
Пытаюсь добавить кнопку текущей позиции, которая должна плавно возвращать на позицию пользователя. Есть такой код компонента карты.
const MapWrapper = () => {
const ymaps = useMapInitialize();
const { long } = useCurrentLocation();
const [location, setLocation] = useState(LOCATION);
const changeMapPosition = useCallback((loc: YMapLocationRequest) => {
setLocation({ ...loc, duration: 5000 });
}, []);
const changeCenterBtnHandler = useCallback(() => {
changeMapPosition(NEW_LOCATION_CENTER);
}, [changeMapPosition]);
if (!ymaps || !long) {
return <Loader />;
}
const {
YMap,
YMapDefaultSchemeLayer,
YMapDefaultFeaturesLayer,
YMapControls,
YMapControlButton
} = ymaps.module(ymaps3);
return (
<YMap className={styles.map} showScaleInCopyrights location={location}>
<YMapDefaultSchemeLayer />
<YMapDefaultFeaturesLayer />
<YMapControls position="right">
<YMapControlButton
text="Change Center"
color="#fff"
background="#007afce6"
onClick={() => changeCenterBtnHandler()}
/>
</YMapControls>
</YMap>
);
};
useMapInitialize =
const useMapInitialize = () => {
const [ymaps, setYmaps] = useState<Reactify | null>(null);
const loadYmaps = useMemo(
() => async () => {
const [ymaps3React] = await Promise.all([
ymaps3.import('@yandex/ymaps3-reactify'),
ymaps3.ready
]);
const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
setYmaps(reactify);
},
[]
);
useEffect(() => {
loadYmaps();
}, [loadYmaps]);
return ymaps;
};
export default useMapInitialize;
Кнопка как бы отрабатывает правильно, но плавное перемещение не происходит.
Ответы (1 шт):
Автор решения: YaSupport
→ Ссылка
Проблема в том, что вы получаете новый компонент YMaps при каждом рендере MapWrapper. Получается, что каждый раз карта пересоздается.
Рекомендуем обернуть ymaps.module (ymaps3) в useMemo, чтобы не вызывать его повторно.