Построение маршрута по клику на внешнюю кнопку в React yandex map по координатам из массива
Хочу понять как создавать маршрут от точки а до точки б по клику на стороннюю кнопку, а не при рендере компонента, так как координаты будут приходить из стороннего массива.
То есть имеется компонент некого списка, карты и кнопки, при выборе элемента из списка и нажатии на кнопку должен строиться маршрут от точки а до координат элемента из списка.
const SightseeingYandexMap = () => {
const centralPoint = [61.700265, 30.689362];
const [state, setState] = React.useState(centralPoint);
const onItemClick = () => {
setState([61.700265, 30.689362]);
};
let map = React.useRef(null);
const mapState = {
center: state,
zoom: 15.4,
behaviors: ['default', 'scrollZoom'],
};
const addRoute = (ymaps) => {
const pointA = centralPoint;
const pointB = [59.918072, 30.304908]; // Санкт-Петербург
const multiRoute = new ymaps.multiRouter.MultiRoute(
{
referencePoints: [pointA, pointB],
params: {
routingMode: 'pedestrian',
},
},
{
boundsAutoApply: true,
}
);
map.current.geoObjects.add(multiRoute);
};
return (
<>
<button onClick={() => onItemClick()}>[55.753559, 37.609218]</button>
<button onClick={() => addRoute()}>onLoad</button>
<a href='#3'>ссылка на id 3</a>
<YMaps>
<Map
width='100%'
height='100%'
state={mapState}
modules={['multiRouter.MultiRoute']}
instanceRef={map}
onLoad={addRoute}
>
<Placemark geometry={[61.702423, 30.688193]} />
</Map>
</YMaps>
</>
);
};