Question

Leaflet routing machine容器div默认显示在地图上，我想将此div放在地图下方。有任何线索吗？

Answer 1

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

创建一个Div，您可以在其中添加控件并将其放置在您想要的页面上

启动您的控件并将其添加到变量中，就像我做的那样

$('form').submit(function() {
    var checkValue = document.getElementById('amount').value;

    if (checkValue == 10000) {
        if ($(this).valid()) {
            if (!confirm('The amount you are applying for is £10000, are you happy with this amount?')) {
                return false;
            }
        }
    }
});

将您的var control = L.Routing.control({ waypoints: [ L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949) ] });添加到地图，如下所示
```
control
```

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

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

这是一个有效的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

如何在map div之外添加Leaflet Routing Machine控件

2 个答案: