Как построить маршрут на яндекс картах в реакте через react-yandex-maps

пытаюсь построить маршрут в yandex maps, если использовать vanilla JS проблем нет, но в react-app не работает. Я попытался сделать это, как в этих примерах:

https://codesandbox.io/s/p37m4lz4j7

https://github.com/gribnoysup/react-yandex-maps/issues/ 14

https://codesandbox.io/s/lrwyz2z4l9

но маршрут не отображается. Однако код из этих примеров тоже не работает, маршрут не появляется. Может кто-нибудь объяснит, как построить маршрут из точки А в точку Б?


person tatar88t    schedule 01.10.2020    source источник


Ответы (2)


Наконец-то я нашел свою ошибку. Если вы используете react-yandex-maps, не забудьте установить ключ API yandex:

<YMaps query={{ apikey: 'YOUR API KEY' }}>
person tatar88t    schedule 02.10.2020

export default function App() {
  const map = useRef(null);
  const mapState = {
    center: [55.739625, 37.5412],
    zoom: 12
  };

  const addRoute = (ymaps) => {
    const pointA = [55.749, 37.524]; // Москва
    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 (
    <div className="App">
      <YMaps query={{ apikey }}>
        <Map
          modules={["multiRouter.MultiRoute"]}
          state={mapState}
          instanceRef={map}
          onLoad={addRoute}
        ></Map>
      </YMaps>
    </div>
  );
}

введите здесь описание изображения

person Shakxzod Namazbaev    schedule 23.06.2021
comment
Пожалуйста, предоставьте объяснение вашего фрагмента кода. Объясните, что делает каждый блок, а не просто вставляйте код. - person crodev; 24.06.2021