如何将MapBox Directions导航说明移至地图下方独立Div？

完全可以实现，核心思路是关闭默认内置的说明控件，通过监听路线生成事件获取导航说明的HTML结构，再插入到自定义的独立容器中，同时保留原有样式。具体步骤如下：

1. 添加独立的导航说明容器 #

在地图容器下方新增一个div，用来承载导航说明：

<div class="flex-child-grow bg-white h-viewport-2/3 h-viewport-full-mm" id="map"></div>
<!-- 新增的导航说明容器 -->
<div id="directions-instructions" class="bg-white p-4 overflow-y-auto max-h-60"></div>

可根据需求给容器添加样式，比如设置最大高度、内边距、滚动条等，确保显示效果符合预期。

2. 修改Directions配置并监听路线事件 #

关闭内置的instructions控件，监听route事件获取导航说明HTML，插入到自定义容器中：

const map = new mapboxgl.Map({ 
  container: 'map',
  style: 'mapbox://styles/mapbox/outdoors-v12',
  center: [-3.13256, 54.59947],
  zoom: 9
});

const directions = new MapboxDirections({
  accessToken: mapboxgl.accessToken,
  profile: 'mapbox/walking',
  interactive: false,
  controls: {
    inputs: false,
    instructions: false, // 关闭默认的说明控件
    profileSwitcher: true,
    attributionControl: false
  }
});

map.addControl(directions);

// 获取自定义容器
const instructionsContainer = document.getElementById('directions-instructions');

// 监听路线生成事件，更新导航说明
directions.on('route', (e) => {
  // 清空容器原有内容
  instructionsContainer.innerHTML = '';
  // 生成导航说明的HTML结构（沿用MapBox默认类名以保留样式）
  const instructionsHtml = e.route[0].legs[0].steps.map(step => {
    return `<div class="mapbox-directions-step">${step.maneuver.instruction}</div>`;
  }).join('');
  // 插入到自定义容器
  instructionsContainer.innerHTML = `<div class="mapbox-directions-instructions">${instructionsHtml}</div>`;
});

map.on('load', () => {
  directions.setOrigin([startLat, startLng]);
  let bounds = new mapboxgl.LngLatBounds();
  bounds.extend([startLat, startLng]);
  bounds.extend([destLat, destLng]);
  directions.setDestination([destLat, destLng]);
  map.fitBounds(bounds, {padding: 900, duration: 3000});
});

3. 保留原有样式 #

MapBox导航说明默认使用mapbox-directions-instructions和mapbox-directions-step类，只要在自定义容器中沿用这些类，就能直接保留原有样式。如果需要微调，可基于这些类自定义CSS：

.mapbox-directions-instructions {
  font-family: inherit;
  line-height: 1.5;
}
.mapbox-directions-step {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

通过以上操作，就能将导航说明完整移至地图下方的独立容器中，同时保持原有样式和功能。

内容的提问来源于stack exchange，提问作者Vogal