如何在react via react yandex映射中的yandex地图上构建路线



我正试图在yandex地图中构建一条路线,如果使用香草JS,没有问题,但在react应用程序中它不起作用。我试着在这些例子中这样做:

https://codesandbox.io/s/p37m4lz4j7

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

https://codesandbox.io/s/lrwyz2z4l9

但不显示路线。然而,这些示例中的代码也不起作用,路径没有出现。也许有人可以解释如何建立从a点到B点的路线?

最后,我发现了我的错误。如果您使用react yandex映射,请不要忘记设置您的yandex api密钥:

<YMaps query={{ apikey: 'YOUR API KEY' }}>
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>
);
}

在此处输入图像描述

最新更新