如何通过 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 墙上分享分数?
在 Codeigniter 中如何通过 ngrok 执行 POST 请求?