volga-volga / react-native-yamap

React Native Yandex Maps | Яндекс Карты | Yandex.MapKit implementation for react native | YandexMaps
144 stars 80 forks source link

Как выполнить fitAllMarkers() и fitMarkers() при инициализации карты? #268

Open seregafanman91 opened 7 months ago

seregafanman91 commented 7 months ago

Здравствуйте. Спасибо за библиотеку.

У меня проблема с методами fitAllMarkers() и fitMarkers(). Я хочу при инициализации карты установить несколько маркеров и подобрать положение камеры, чтобы вместить указанные маркеры на ней.

Я использую для этого методы fitAllMarkers() и fitMarkers() внутри метода жизненного цикла useEffect при монтировании компонента с моей картой.

export const PlacesMap: FC<Props> = ({ city, style }) => {
  const { places } = city;

  const mapRef = useRef<YaMap>(null);

  useEffect(() => {
    mapRef.current?.fitAllMarkers();
  }, []);

  return (
    <YaMap style={style} ref={mapRef}>
      {places.map((place) => (
        <Marker key={place.id} point={{ lat: place.lat, lon: place.lon }} />
      ))}
    </YaMap>
  );
};

С одним маркером этот код работает отлично но если маркеров больше то происходит ошибка:

image

Можно переписать код и использовать эти методы внутри onMapLoaded но тогда происходит эффект с отображением полной карты и затем анимировананное позиционирование к нужным координатам на карте. Это создает неприятный пользовательский опыт.

Кто то сталкивался с такой проблемой? Есть ли решения?

ProSysYo commented 7 months ago
Снимок экрана 2023-11-18 в 19 03 10

Не помню нужен ли первый useEffect, ваш случай useEffect который ниже