0

Начал учиться писать карты для пользователя. Есть постоянная точка, нужно поставить еще один маркер, сделать между ними маршрут и получить расстояние между ними. Как это реализовать, есть ли понятная документация с примерами к 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>
          

1 ответ 1

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

4
  • Не до конца понял, что делает initMap, зачем три массива одинаковых координат, если пробовать не локалхост, то TEST заработает?
    – Miha
    2 дек 2020 в 18:33
  • как тогда мне решить проблему чтобы на локалхосте работало?
    – Miha
    2 дек 2020 в 18:34
  • - Массивы не одинаковые а ставят 3 отдельных точки, - С локалхостом не нашел решения это уже ограничения YandexAPI - initMap ожидает когда проинициализируються объекты карты
    – mego4iter
    2 дек 2020 в 19:08
  • Спасибо, постараюсь разобраться во всем этом
    – Miha
    2 дек 2020 в 20:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.