1

Мне нужно динамичски добавлять метку на карту имея координаты. Сейчас код такой

 const placemarkRef = useRef(null);
 const mapRef = useRef(null);

const clickFunc = () => {
          placemarkRef.current = createPlacemark( [54.738276, 20.489808] )
          mapRef.current.geoObjects.add(placemarkRef.current);
}

const createPlacemark = (coords) => {
    return new mapRef.current.Placemark(
      coords,
      {
        iconCaption: 'какое то имя'
      },
      {
        hintContent: 'Надпись',
        preset: "islands#violetDotIconWithCaption",
        draggable: false
      }
    );
  };

 const mapFunc = () => {
    return <YMaps 
            enterprise
            query={{
            load: "package.full", //отключаем модули. Используем стандартное поведение(полная загрузка)
            apikey: "КЛЮЧ"
            }}>
                <Map
                onLoad={ymaps => mapRef.current = ymaps }
                defaultState={{ center: [54.738276, 20.489808], zoom: 11 }}
                instanceRef={mapRef.current}
                >
            </Map>
        </YMaps>
}

return <div>{mapFunc()}
            <button onClick={() => clickFunc()} />НАЖМИ МЕНЯ</button>
       </div>

Это почему то не работает, хотя должно, судя по всем примерам и документации. Обратил внимание когда дебажил, что geoObjects в строке

mapRef.current.geoObjects.add(placemarkRef.current);

почему то undefiened, все остальные свойства в mapRef.current на месте

Как видно, остальные свойства на месте, а geoObjects нету. Хотя в документации yandex API это свойство должно быть, как например тут https://yandex.ru/dev/maps/jsbox/2.1/placemark

введите сюда описание изображения

1 ответ 1

0

Понял в чём была проблема. Неправильная инициализация карт(добавление ref и onLoad)

было:

<Map
            onLoad={ymaps => mapRef.current = ymaps }
            instanceRef={mapRef.current}
            >

Должно быть:

 <Map
                instanceRef={mapRef}
                onLoad={ymaps => setYmaps(ymaps) }

Где setYmaps это использование хука react useState. После чего мы получаем доступы отдельно к провайдеру ymaps(наш хук который задаётся в onLoad) и отдельно получаем доступ к карте mapRef.current. После всех этих манипуляций нам доступны geoObjects свойство и прочие. Получаем полный доступ в общем.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.