如何通过react-yandex-maps在yandex映射上构建路线

问题描述

我正在尝试在yandex地图中构建路线，如果使用香草JS则没有问题，但在react-app中则无法正常工作。我尝试按照以下示例中的方法进行操作：

https://codesandbox.io/s/p37m4lz4j7

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

https://codesandbox.io/s/lrwyz2z4l9

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

解决方法

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

library(ggplot2)
library(dplyr)
library(patchwork)

make_plot <- function(d,switch = NULL) {
  ggplot(d,aes(factor(Year),Value,colour = Model,group = Model)) +
    geom_line(size = 0.6) +
    scale_colour_manual(values = c("Black","blue","darkgreen","red")) +
    scale_x_discrete(labels = c(1981,2005,2026,2050,2075,2100),breaks = factor(c(1981,2100)),expand = c(0.04,0.04)) +
    facet_grid(Variable ~ Location,scales = "free_y",switch = switch,# flip the facet labels along the y axis from the right side to the left
               labeller = as_labeller(c(
                 CDD = "CDD (Days)",CWD = "CWD (Days)",R20 = "R20 (Days)",R50 = "R50 (Days)",R95P = "R95P (mm)",R99P = "R99p (mm)",RX5DAY = "RX5DAY (mm)",SDII = "SDII (mm/day)",Bimodal = "Bimodal",Unimodal = "Unimodal"
               ))
    ) +
    guides(colour = guide_legend(override.aes = list(size = 2))) +
    labs(x = "Year",y = NULL,colour = NULL) +
    theme_bw(base_size = 15) +
    theme(
      strip.background = element_blank(),# remove the background
      strip.placement = "outside",legend.position = "bottom",legend.text = element_text(size = 15),axis.text = element_text(colour = "black")
    )  
}

p1 <- make_plot(filter(df,Location == "Bimodal"),switch = "y")
p2 <- make_plot(filter(df,Location == "Unimodal"),switch = "y")


p1 + p2 + plot_layout(guides = "collect") &
  theme(legend.position='bottom')

,

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