如何为JavaScript版Google Maps API添加导航指引面板？

以下是针对你的现有代码添加文字导航指引的具体修改方案：

1. 更新HTML结构，添加导航面板 #

在页面中新增一个用于展示文字导航的容器，放在地图容器附近即可：

<!-- 现有地图容器 -->
<div id="map"></div>
<!-- 新增导航指引面板 -->
<div id="directions-panel" class="directions-panel"></div>

2. 补充CSS样式优化显示 #

给导航面板添加基础样式，提升可读性：

.directions-panel {
  width: 320px;
  padding: 1.5rem;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-top: 1rem;
}

3. 修改JavaScript逻辑，集成导航渲染 #

3.1 确保API加载包含Directions库 #

加载Google Maps API时，需同时引入directions库（保留原本的places库）：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places,directions"></script>

3.2 初始化DirectionsRenderer对象 #

在地图初始化代码中，创建DirectionsRenderer实例，关联地图和导航面板：

// 初始化地图（原有代码）
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
});

// 新增：初始化导航渲染器
const directionsRenderer = new google.maps.DirectionsRenderer({
  map: map, // 将路线绘制到地图上
  panel: document.getElementById("directions-panel"), // 将文字导航渲染到指定面板
  suppressMarkers: false, // 保留起点终点标记，可根据需求设置为true隐藏
});

// 保留原有DirectionsService实例
const directionsService = new google.maps.DirectionsService();

3.3 修改路线请求的处理逻辑 #

替换原有手动绘制路线的代码，改用DirectionsRenderer自动处理路线绘制和导航展示：

// 假设原有代码中存在路线请求的函数，修改如下
function calculateRoute(origin, destination) {
  const request = {
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING, // 可根据需求切换为WALKING/TRANSIT等
  };

  directionsService.route(request, (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      // 渲染路线和文字导航
      directionsRenderer.setDirections(result);
    } else {
      alert(`路线获取失败：${status}`);
    }
  });
}

3.4 关联Autocomplete选择事件 #

确保当用户通过Autocomplete选择起点/终点后，调用上述calculateRoute函数，传递正确的起点和终点参数（原有Autocomplete逻辑可保留，只需确保触发路线计算时传递正确的地点值）。

4. 测试验证 #

完成修改后，输入起点和终点，地图会自动绘制路线，同时导航面板会展示详细的文字指引步骤（如转向提示、距离、预计时间等）。

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