如何在map div之外添加Leaflet Routing Machine控件 [英] How to add Leaflet Routing Machine control outside the map div

问题描述

宣传单路由计算机容器div默认显示在地图上，我想要把这个div放在地图下面。有任何线索吗？

Leaflet routing machine container div is displayed on the map by default and I want to put this div below the map. Any clue to do this ?

推荐答案

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

So, you need to add a leaflet control outside the map div. Here is a solution to it.

• 创建一个Div，你想要添加你的控件并将它放在页面上你想要的地方



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

• Create a Div where you want to add your control and position it on page where ever you want

• Initiate your control and add it in a variable, like in this case I did

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

将控件添加到地图如下所示

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

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

Finally add your control to initially defined html div

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

这是一个工作小提琴

这篇关于如何在map div之外添加Leaflet Routing Machine控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！