Как получать расстояние с карты. yandex-react-maps

Question

Начал учиться писать карты для пользователя. Есть постоянная точка, нужно поставить еще один маркер, сделать между ними маршрут и получить расстояние между ними. Как это реализовать, есть ли понятная документация с примерами к yandex-maps-react?

  const mapData = {
    center: [54.5101087, 36.2598115],
    zoom: 13,
  };
  
  const coordinates = [
    [54.5101087, 36.2598115],
  ];

  <YMaps>
        <Map style={divStyle} defaultState={mapData}>
           {coordinates.map(coordinate => <Placemark geometry={coordinate} />)}
        </Map>
  </YMaps>

Answer 1

Получилось как то так

Примеры с маршрутами взяты из документации

Справка по react-yandex-maps

class App extends Component {
    constructor(props) {
        super(props);
        this.initMap = this.initMap.bind(this);
        this.coordinates = [
            [54.5001087, 36.2598115],
            [54.5101087, 36.2598115],
            [54.5001087, 36.2698115],
        ];
        this.ymap = null;
        this.mapRef = null;
    }

    initMap(ymap, mapRef) {
        if (ymap) this.ymap = ymap;
        if (mapRef) this.mapRef = mapRef;
        if (!this.ymap || !this.mapRef) return;

        let multiRoute = new this.ymap.multiRouter.MultiRoute({
            referencePoints: this.coordinates
        });// Подписка на событие готовности маршрута.
        multiRoute.model.events.add('requestsuccess', function() {
            // Получение ссылки на активный маршрут.
            var activeRoute = multiRoute.getActiveRoute();
            // Получение коллекции путей активного маршрута.
            var activeRoutePaths = activeRoute.getPaths();
            // Проход по коллекции путей.
            activeRoutePaths.each(function(path) {
                console.log("Длина пути: " + path.properties.get("distance").text);
                console.log("Время прохождения пути: " + path.properties.get("duration").text);
            });
        });
        multiRoute.editor.stop();
        this.mapRef.geoObjects.add(multiRoute);
    }

    render() {
        const mapData = {
            center: [54.5051087, 36.2598115],
            zoom: 13,
        };

        const query = {
            lang: 'ru_RU',
            load: 'package.full',
        };

        return (
            <div>
                <YMaps query={query}>
                    <Map
                        defaultState={mapData}
                        instanceRef={(ref) => this.initMap(null, ref)}
                        onLoad={(ymap) => this.initMap(ymap, null)}>
                        <RouteEditor/>
                        {this.coordinates.map((coordinate, idx) => <Placemark geometry={coordinate} key={idx}/>)}
                    </Map>
                </YMaps>
                <div onClick={() => this.initMap()}>TEST</div>
            </div>
        );
    }
}

export default App;

c localhost есть проблемы с постройкой маршрута запрос возвращает 403

БЛОГ НА HUSL

Как получать расстояние с карты. yandex-react-maps

Ответы (1 шт):