Leaflet Routing Machine路线指令显隐问题：关闭自动路由致航点路线消失

方法1：直接控制指令面板DOM元素 #

Leaflet Routing Machine的指令面板默认带有leaflet-routing-container类名，可通过JS直接控制它的显示状态，完全不影响航点路线的绘制：

• 隐藏指令面板：

document.querySelector('.leaflet-routing-container').style.display = 'none';

• 显示指令面板：

document.querySelector('.leaflet-routing-container').style.display = 'block';

方法2：初始化时分离指令面板与路由核心 #

如果需要更灵活的动态控制，可以在初始化路由时不加载默认指令面板，手动挂载/移除面板控件：

// 初始化路由，仅保留路线绘制功能，不加载指令面板
const router = L.Routing.control({
  waypoints: [
    L.latLng(57.74, 11.94),
    L.latLng(57.6792, 11.949)
  ],
  routeWhileDragging: true, // 保持航点拖拽时的自动路由（按需开启）
  addWaypoints: false // 可选：关闭默认添加航点按钮
}).addTo(map);

// 单独创建指令面板控件
const instructionsPanel = L.Routing.Instructions({
  containerClassName: 'custom-routing-instructions'
});

// 显示指令面板
function showInstructions() {
  router.addControl(instructionsPanel);
}

// 隐藏指令面板
function hideInstructions() {
  router.removeControl(instructionsPanel);
}

方法3：CSS默认隐藏（无需动态切换场景） #

若只需默认隐藏指令面板，确保CSS选择器优先级足够即可：

.leaflet-routing-container {
  display: none !important;
}

你之前用show:false无效，是因为该参数控制的是整个路由控件的显示，而非单独的指令面板，所以会连带路线一起隐藏。

内容的提问来源于stack exchange，提问作者Torres Clarizza DL