polyak-y
@polyak-y
Js, React.js,Vue.js,css

Как динамически добавить метки в React Yandex Map?

import React, { useEffect } from 'react'
import { YMaps, Map, Clusterer, Placemark } from 'react-yandex-maps';
import { useStyles } from './style';

const YandexMapComponent = ({ checkedObjects }) => {
  const classes = useStyles();
  let myMap;

function myGeoCode(ymaps, myMap, address) {
    ymaps.geocode(address, {
        results: 1
    }).then(function (res) {
        // Выбираем первый результат геокодирования.
        let firstGeoObject = res.geoObjects.get(0)
        // Координаты геообъекта.
        let coords = firstGeoObject.geometry.getCoordinates()
        // Область видимости геообъекта.
        let bounds = firstGeoObject.properties.get('boundedBy');

        firstGeoObject.options.set('preset', 'islands#darkBlueDotIconWithCaption');
        // Получаем строку с адресом и выводим в иконке геообъекта.
        //firstGeoObject.properties.set('iconCaption', firstGeoObject.getAddressLine());

        // Добавляем первый найденный геообъект на карту.
        myMap.geoObjects.add(firstGeoObject);
        // Масштабируем карту на область видимости геообъекта.
        myMap.setBounds(bounds, {
            // Проверяем наличие тайлов на данном масштабе.
            checkZoomRange: true
        });

        let myPlacemark = new ymaps.Placemark(coords, {
            iconContent: 'моя метка',
        }, {
            preset: 'islands#violetStretchyIcon'
        });

        myPlacemark.events.add('click', function() {
            alert(address)
        });

        myMap.geoObjects.add(myPlacemark);
    });
}

    function init(ymaps, myMap) {
        checkedObjects.forEach(address => myGeoCode(ymaps, myMap, `${address.district.city.name}, ${address.address}`))
    }

  return (
    <YMaps
      query={{
        ns: 'use-load-option',
        apikey: 'af28acb6-4b1c-4cd1-8251-b2f67a908cac',
        load: 'package.full'
      }}
    >
      <Map
        key={checkedObjects}
        state={{
          center: [],
          zoom: 9,
          controls: ['zoomControl', 'fullscreenControl']
        }}
        modules={["geolocation", "geocode"]}
        onLoad={ymaps => {
            ymaps.ready(() => {
                init(ymaps, myMap)
            });
        }}
        instanceRef={yaMap => {
            if (yaMap) {
                myMap = yaMap;
            }
        }}
        className={classes.mapContainterStyle}
      />
    </YMaps>
  )
};

export default YandexMapComponent;


создал указанный компонент. Где по адресу вывожу метку на карте. У меня динамическое добавление адресов. Как мне правильно сделать их. Единственно до чего дошел это принудительная перерисовка компонента. Понимаю что это дичь, но как сделать правильно не понимаю. Буду признателен за помощь.
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ну по идее должен помочь хук useState
Пример:
const [placemarks,setPlacemarks] = useState([]);
setPlacemarks([<Placemark key={0} geometry={[45.12,35.1]} />
return placemarks;
Ответ написан
Ваш ответ на вопрос

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

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