如何将传单路由机器控制添加到另一个 div 而不是地图：react-leaflet

Question

我想在仪表板上显示路由机器控件 div（折叠侧栏，如 google 地图）而不是地图 div，因为它覆盖了移动版本的地图。有没有更简单的方法来做到这一点？我已经尝试了这两种方式：appending control div to another div ,

我有 3 个组件 MapComponent、RoutingMachine 和 Dashboard。

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 中的控件。如果需要，您可以将其修改为水平放置在地图下方或其他适合您需要的位置。

Demo

如何将传单路由机器控制添加到另一个 div 而不是地图：react-leaflet

how to add leaflet routing machine control to another div instead of map: react-leaflet

leaflet

reactjs

leaflet-routing-machine

react-leaflet