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

Question

传单routing machine容器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);

这是一个有效的 fiddle

Answer 2

我修改了 muzaffar 解决方案，现在它工作得更好了。谢谢 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);

这里如果 fiddle

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

How to add Leaflet Routing Machine control outside the map div

javascript

routing

leaflet