Для того чтобы убрать движение пина при скролле мышкой в react-yandex-maps, можно воспользоваться одним из следующих подходов:
1. Использование опции dragPan
:
React-yandex-maps имеет опцию dragPan
, которая позволяет задать, можно ли перемещать карту путем перетаскивания мышкой. По умолчанию, эта опция включена, но для отключения ее при скролле мышкой, вам нужно установить это значение в false
. Вот пример кода:
import React from 'react'; import { YMaps, Map, Placemark } from 'react-yandex-maps'; const mapState = { center: [55.75, 37.57], zoom: 9 }; const App = () => { return ( <YMaps> <Map state={mapState} options={{ suppressMapOpenBlock: true, dragPan: false }}> <Placemark geometry={[55.75, 37.57]} /> </Map> </YMaps> ); }; export default App;
В этом примере пин будет находиться в фиксированном положении, и при скролле страницы пин не будет перемещаться.
2. Использование опции options
:
Вы также можете воспользоваться опцией options
компонента Map
, чтобы задать пользовательские параметры поведения карты. Воспользуйтесь опцией scrollZoom
и установите ее значение в false
, чтобы отключить масштабирование карты при скролле мышкой. Пример кода:
import React from 'react'; import { YMaps, Map, Placemark } from 'react-yandex-maps'; const mapState = { center: [55.75, 37.57], zoom: 9 }; const mapOptions = { suppressMapOpenBlock: true, scrollZoom: false }; const App = () => { return ( <YMaps> <Map state={mapState} options={mapOptions}> <Placemark geometry={[55.75, 37.57]} /> </Map> </YMaps> ); }; export default App;
В этом примере пин также будет оставаться на месте при скролле мышкой.
Это два основных подхода, которые можно использовать для отключения движения пина при скролле мышкой в react-yandex-maps. Выберите подход, который лучше всего подходит для вашего проекта и примените соответствующие настройки.