Как передать динамически координаты?

[legiorex]

Здравствуйте, как передать динамически координаты от маркеров в ломанную? https://jsfiddle.net/fc9vy4br/ Необходимо реализовать тоже самое, только с помощью react-yandex-maps

[mmarkelov]

@legiorex привет. Как-то так:

import { YMaps, Map, Placemark, Polyline } from "react-yandex-maps";

const mapState = {
  center: [55.751574, 37.573856],
  zoom: 9
};

function App() {
  // Сохраняем ссылку на инстанс Линии
  const polyline = React.createRef(null);

  return (
    <div className="App">
      <YMaps>
        <Map defaultState={mapState}>
          <Placemark
            geometry={[55.661574, 37.573856]}
            options={{ draggable: true }}
            // Событие change связано с св-вом geometry инстанса метки, 
           // поэтому onChange работать не будет, придется использовать instanceRef
            instanceRef={ref => {
              if (ref) {
                // По аналогии добавляем обработчик
                ref.geometry.events.add("change", function(e) {
                  const newCoords = e.get("newCoordinates");
                  // Используя ссылку на инстанс Линии меняем ее геометрию
                  polyline.current.geometry.set(0, newCoords);
                });
              }
            }}
          />
          <Placemark
            geometry={[55.801574, 37.503856]}
            options={{ draggable: true }}
            instanceRef={ref => {
              if (ref) {
                ref.geometry.events.add("change", function(e) {
                  const newCoords = e.get("newCoordinates");
                  polyline.current.geometry.set(1, newCoords);
                });
              }
            }}
          />
          <Polyline
            geometry={[[55.661574, 37.573856], [55.801574, 37.503856]]}
            instanceRef={polyline}
          />
        </Map>
      </YMaps>
    </div>
  );
}

Первое что пришло в голову, возможно сделать красивее

[legiorex]

Спасибо большое, работает!