如何在地圖 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);

在這里，如果小提琴