如何在地图 div 外添加 Leaflet Routing Machine 控件

Question

Leaflet路由机器容器div默认显示在地图上，我想把这个div放在地图下面。 有什么线索可以做到这一点吗？

Answer 1

因此，您需要在地图 div 之外添加一个传单控件。 这是一个解决方案。

• 在您想要添加控件的位置创建一个 Div 并将其放置在您想要的页面上

• 启动您的控件并将其添加到变量中，就像在这种情况下我所做的一样

  var control = L.Routing.control({ waypoints: [ L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949) ] });

• 将您的control添加到地图，如下所示

  control._map = map; var controlDiv = control.onAdd(map);

• 最后将您的控件添加到最初定义的 html div

   document.getElementById('controls').appendChild(controlDiv);

这是一个工作小提琴

Answer 2

我修改了 muzaffar 解决方案，现在它工作得更好了。 谢谢穆扎法尔！

var control = L.Routing.control({
    waypoints: [
        L.latLng(32.78186, -96.76612),
        L.latLng(32.77602, -96.80766)
    ],
    geocoder: L.Control.Geocoder.nominatim(),
    routeWhileDragging: true,
    reverseWaypoints: true,
    fitSelectedRoutes: true
});

var routeBlock = control.onAdd(map);    
document.getElementById('controls').appendChild(routeBlock);

在这里，如果小提琴