использую библиотеку react-yandex-maps
текущий код такой
import React, { FC, useEffect, useMemo, useState } from 'react';
import { YMaps, Map, Placemark, Clusterer, YMapsApi } from 'react-yandex-maps';
import { ShopInfoCard } from 'ui';
import { StoreItemType } from 'templates/content/MultiCard/Sidebar/Delivery/AdditionalServices/store/AdditionalServicesStore';
import { usePlatformMobile } from 'templates/hooks';
import { imgPath } from 'scripts/utils';
import styles from 'ui/YandexMap/styles/YandexMap.module.scss';
const apiKey =
'https://api-maps.yandex.ru/2.1/?lang=ru_ru&noasync=1&apikey=c3d251ad-ce45-4905-9aa5-ac92b021a298';
const AddressMap = ({ className, mapRef, setYmaps }) => {
const isMobile = usePlatformMobile();
const [mapCenter, setMapCenter] = useState([55.75, 37.57]);
const handleMapMove = (e) => {
console.log('move');
const newCenter = e.get('target').getCenter();
console.log(newCenter);
setMapCenter(newCenter);
};
const mapBasicCenter = useMemo(() => {
// @ts-ignore
if (window.digitalData?.currentLocation.lat && window.digitalData?.currentLocation.lon) {
return [
// @ts-ignore
window.digitalData?.currentLocation.lat,
// @ts-ignore
window.digitalData?.currentLocation.lon,
];
}
return [55.75, 37.57];
}, []);
return (
<div className={`${styles.mapContainer} ${className}`}>
<YMaps enterprise={true} query={{ apikey: apiKey, load: 'util.bounds' }}>
<Map
height={'100%'}
width={'100%'}
defaultState={{
center: mapCenter,
zoom: 9,
}}
instanceRef={mapRef}
onLoad={(ymaps) => setYmaps(ymaps)}
onBoundsChange={handleMapMove}
>
<Clusterer>
{mapCenter && (
<Placemark
geometry={mapBasicCenter}
options={{
iconLayout: 'default#image',
iconImageHref: imgPath('/img/map/position.png'),
iconImageSize: [36, 36],
iconImageOffset: [-18, -44],
balloonPanelMaxMapArea: 0,
}}
/>
)}
</Clusterer>
</Map>
</YMaps>
</div>
);
};
export { AddressMap };
Как при движении карты сделать так, чтобы пин всегда был в центре (эффект как в картах приложения яндекс такси, или в озоне )? Сейчас при движении карты пин уходит вместе с картой