如何将传单路由机控件添加到另一个div而不是map: react传单

Question

我想在仪表板上显示路由机控制div (像google地图那样的侧边栏)，而不是map div，因为它正在覆盖移动版本的地图。有什么更简单的方法吗？我尝试过以下两种方法：将控制div附加到另一个div，附加控制div与onAdd(地图)

我有3个组件MapComponent、RoutingMachine和仪表板。

RoutingMachine.jsx

import React from "react";
import L, { control, Map, map, routing } from "leaflet";
import { createControlComponent } from "@react-leaflet/core";
import "leaflet-routing-machine";
import 'lrm-graphhopper'
import "leaflet-routing-machine/dist/leaflet-routing-machine.css";
import { useEffect } from "react";
import { useMap } from "react-leaflet";


const createRoutineMachineLayer = ({ userLat, userLong, bikeLat, bikeLong }) => {
  
  const instance = L.Routing.control({
    waypoints: [
      L.latLng(userLat, userLong),
      L.latLng(bikeLat, bikeLong)
    ],
    lineOptions: {
      styles: [{ color: "#6FA1EC", weight: 4 }]
    },
    createMarker: function() {
      return null
    },
    router: new L.Routing.GraphHopper('deebe34a-a717-4450-aa2a-f6de3ec9b443', {
      urlParameters: {
          vehicle: 'foot'
      }}),
    show: true,
    addWaypoints: false,
    routeWhileDragging: true,
    draggableWaypoints: true,
    fitSelectedRoutes: true,
    showAlternatives: false
  })

  return instance;
};

const RoutingMachine = createControlComponent(createRoutineMachineLayer);

export default RoutingMachine;

Answer 1

您可以使用两个参考文献来实现这种行为。一个是附加控件的div，另一个是路由机实例的引用。

const Map = () => {
  const [map, setMap] = useState(null);
  const routingMachineRef = useRef();
  const pluginRef = useRef();

  useEffect(() => {
    if (!map) return;
    const controlContainer = routingMachineRef.current.onAdd(map);
    pluginRef.current.appendChild(controlContainer);
  }, [map]);
  ...

  <div
  style={{
    display: "grid",
    gridTemplateColumns: "repeat(2, minmax(0, 1fr))"
  }}
>
  <MapContainer... 
     <RoutineMachine ref={routingMachineRef} />
  </MapContainer>
  <div style={{ border: "1px solid black" }} ref={pluginRef} />
</div>
);
};

在这个演示中，您可以找到垂直附加在div中的控件。您可以修改它，以便将它水平地放置在地图下面，如果您想要的话，或者其他适合您需要的地方。

演示