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

Posted

技术标签:

【中文标题】如何通过 react-yandex-maps 在 yandex 地图上构建路线【英文标题】:How to build a route on yandex maps in react via react-yandex-maps 【发布时间】: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 点的路线?

【问题讨论】:

【参考方案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 的解释。解释每个块的作用,而不仅仅是粘贴代码。

以上是关于如何通过 react-yandex-maps 在 yandex 地图上构建路线的主要内容,如果未能解决你的问题,请参考以下文章

如何通过 Facebook Connect 在 Facebook 墙上分享分数?

如何在接收响应时通过 websocket 发送请求

如何通过 Java 在 Kafka 中创建主题

在 Codeigniter 中如何通过 ngrok 执行 POST 请求?

如何在 Sharetribe 开源上通过 Paypal 实现付款?

如何通过代码在Flash中制作动画?