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;


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

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

Войти через центр авторизации
Похожие вопросы
Leningrad Media Санкт-Петербург
от 100 000 до 150 000 ₽
SaveTime Москва
от 160 000 ₽
Сбербанк Санкт-Петербург
До 250 000 ₽
23 сент. 2020, в 20:17
100000 руб./за проект
23 сент. 2020, в 20:15
12000 руб./за проект
23 сент. 2020, в 20:14
1000 руб./за проект