如何使用reactjs查询此处地图中的路线

如何使用reactjs查询此处地图中的路线,reactjs,react-hooks,heremaps,Reactjs,React Hooks,Heremaps,我正在尝试使用reactjs在路线上使用此处地图进行地图查询,目前我可以使用以下代码在我的应用程序中显示地图: import * as React from 'react'; export const DisplayMapFC = () => { // Create a reference to the HTML element we want to put the map on const mapRef = React.useRef(null); /** * Cre

我正在尝试使用reactjs在路线上使用此处地图进行地图查询,目前我可以使用以下代码在我的应用程序中显示地图:

import * as React from 'react';

export const DisplayMapFC = () => {
  // Create a reference to the HTML element we want to put the map on
  const mapRef = React.useRef(null);

  /**
   * Create the map instance
   * While `useEffect` could also be used here, `useLayoutEffect` will render
   * the map sooner
   */
  React.useLayoutEffect(() => {
    // `mapRef.current` will be `undefined` when this hook first runs; edge case that
    if (!mapRef.current) return;
    const H = window.H;
    const platform = new H.service.Platform({
        apikey: "xxxxxxxxx"
    });
    
    const defaultLayers = platform.createDefaultLayers();

    const hMap = new H.Map(mapRef.current, defaultLayers.vector.normal.map, {
      center: { lat: 36.2104063, lng: -113.7236071 }, //,
      zoom: 4,
      pixelRatio: window.devicePixelRatio || 1
    });


    const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(hMap));

    const ui = H.ui.UI.createDefault(hMap, defaultLayers);

    // This will act as a cleanup to run once this hook runs again.
    // This includes when the component un-mounts
    return () => {
      hMap.dispose();
    };
  }, [mapRef]); // This will run this hook every time this ref is updated

  return <div className="map" ref={mapRef} style={{ height: "355px",width:"650px" }} />;
};


const searchMap=(e)=>{
    e.preventDefault();
    console.log(" view controle ",e);
    const origin="52.5308,13.3847";
    const destiny="52.5264,13.3686";
}
import*as React from'React';
导出常量DisplayMapFC=()=>{
//创建对要放置地图的HTML元素的引用
const mapRef=React.useRef(null);
/**
*创建映射实例
*虽然这里也可以使用'useEffect','useLayoutEffect'将呈现
*早点看地图
*/
React.useLayoutEffect(()=>{
//当这个钩子第一次运行时,`mapRef.current`将是`undefined`;边case
如果(!mapRef.current)返回;
const H=window.H;
const platform=新的H.service.platform({
apikey:“xxxxxxxxx”
});
const defaultLayers=platform.createDefaultLayers();
const hMap=new H.Map(mapRef.current,defaultLayers.vector.normal.Map{
中心:{lat:36.2104063,lng:-113.7236071},//,
缩放:4,
pixelRatio:window.devicePixelRatio | | 1
});
const behavior=new H.mapevents.behavior(new H.mapevents.mapevents(hMap));
const ui=H.ui.ui.createDefault(hMap,defaultLayers);
//一旦这个钩子再次运行,这将作为一个清理来运行。
//这包括组件何时卸载
return()=>{
hMap.dispose();
};
},[mapRef]);//每次更新此引用时,都将运行此挂钩
返回;
};
const searchMap=(e)=>{
e、 预防默认值();
日志(“视图控件”,e);
const origin=“52.5308,13.3847”;
const destiny=“52.5264,13.3686”;
}
我试图将坐标从起点发送到终点,以便显示绘制的路线和时间 更改API_键、原点和目标。祝你好运!