@GNG999

Как при движении карты сохранять пин всегда в центре?

использую библиотеку 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 };


Как при движении карты сделать так, чтобы пин всегда был в центре (эффект как в картах приложения яндекс такси, или в озоне )? Сейчас при движении карты пин уходит вместе с картой
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы