如何通过 react-yandex-maps 在 yandex 地图上构建路线答案

【问题标题】：How to build a route on yandex maps in react via react-yandex-maps如何通过 react-yandex-maps 在 yandex 地图上构建路线
【发布时间】：2020-10-01 14:04:20
【问题描述】：

我正在尝试在 yandex 地图中构建路线，如果使用 vanilla JS 没有问题，但在 react-app 中它不起作用。我试着在这些例子中这样做：

https://codesandbox.io/s/p37m4lz4j7

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

https://codesandbox.io/s/lrwyz2z4l9

但路线不显示。但是，这些示例中的代码也不起作用，路线没有出现。也许有人可以解释如何建立从 A 点到 B 点的路线？

【问题讨论】：

标签： reactjs maps yandex yandex-maps yandex-api

【解决方案1】：

最后，我发现了我的错误。如果您使用 react-yandex-maps，请不要忘记设置您的 yandex api 密钥：

<YMaps query={{ apikey: 'YOUR API KEY' }}>

【讨论】：

【解决方案2】：

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>
  );
}

enter image description here

【讨论】：

请提供您的代码 sn-p 的解释。解释每个块的作用，而不仅仅是粘贴代码。