Google Directions API问题：地图与文字导航无法并排显示

嘿，我帮你搞定这个文字导航不显示的问题！核心原因是你已经成功调用API绘制了地图路线，但没把API返回的分步导航数据提取出来渲染到页面上。下面结合你的现有代码逻辑，一步步补全功能：

一、先补全页面结构 #

首先你需要在HTML里加一个用来放文字导航的容器，和地图容器做并排布局，我顺便加了点基础样式让布局更美观：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Uw route.</title>
    <style>
        /* 并排布局样式 */
        .route-container {
            display: flex;
            gap: 20px;
            padding: 20px;
        }
        #map {
            width: 60%;
            height: 600px;
        }
        #directions-text {
            width: 40%;
            background-color: #f5f5f5;
            padding: 15px;
            overflow-y: auto;
            height: 600px;
            border-radius: 8px;
        }
        .step-item {
            margin-bottom: 18px;
            padding-bottom: 12px;
            border-bottom: 1px solid #ddd;
        }
        .step-item h4 {
            margin-top: 0;
            color: #2d3748;
        }
    </style>
    <script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
</head>
<body>
    <div class="route-container">
        <div id="map"></div>
        <div id="directions-text"></div> <!-- 新增的文字导航容器 -->
    </div>
    <script>
        function initMap() {
            // 这里替换成你的起点和终点
            const startPoint = "阿姆斯特丹中央车站";
            const endPoint = "梵高博物馆";
            
            // 初始化地图
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: {lat: 52.3676, lng: 4.9041}
            });

            const directionsService = new google.maps.DirectionsService();
            const directionsRenderer = new google.maps.DirectionsRenderer({
                map: map
            });

            // 请求路线数据
            directionsService.route({
                origin: startPoint,
                destination: endPoint,
                travelMode: google.maps.TravelMode.DRIVING // 可切换成WALKING/TRANSIT
            }, (response, status) => {
                if (status === 'OK') {
                    // 渲染地图路线（你原来的逻辑）
                    directionsRenderer.setDirections(response);
                    // 新增：渲染文字版分步导航
                    renderTextInstructions(response);
                } else {
                    alert('路线获取失败：' + status);
                }
            });
        }

        // 专门用来渲染文字导航的函数
        function renderTextInstructions(response) {
            const textPanel = document.getElementById('directions-text');
            textPanel.innerHTML = ''; // 先清空容器

            // 从API返回数据中提取路线的核心信息
            const routeLeg = response.routes[0].legs[0];
            
            // 先加个路线总览
            const overview = document.createElement('div');
            overview.innerHTML = `
                <h3>路线总览</h3>
                <p><strong>总距离：</strong>${routeLeg.distance.text}</p>
                <p><strong>预计时长：</strong>${routeLeg.duration.text}</p>
            `;
            textPanel.appendChild(overview);

            // 遍历每一步导航，渲染到页面
            routeLeg.steps.forEach((step, index) => {
                const stepElement = document.createElement('div');
                stepElement.className = 'step-item';
                stepElement.innerHTML = `
                    <h4>步骤 ${index + 1}</h4>
                    <p>${step.instructions}</p>
                    <p><strong>当前段距离：</strong>${step.distance.text} | <strong>预计耗时：</strong>${step.duration.text}</p>
                `;
                textPanel.appendChild(stepElement);
            });
        }

        // 页面加载完成后初始化地图
        window.onload = initMap;
    </script>
</body>
</html>

二、核心逻辑说明 #

• 容器预留：必须在HTML里加#directions-text这个容器，不然文字导航没地方放
• 数据提取：API返回的response.routes[0].legs[0].steps就是每一步的导航细节，包含文字指引、距离、时长这些关键信息
• 动态渲染：用JavaScript创建DOM元素，把每一步的信息插入到文字容器里，实现分步导航的展示

三、如果还是不显示？排查这几点！ #

1. 打开浏览器控制台（F12），看有没有JavaScript报错，比如容器找不到、数据未正确读取
2. 确认API请求的status是OK，如果不是，根据错误提示排查（比如API密钥权限问题？不过你地图能显示，大概率密钥是正常的）
3. 可以在控制台打印console.log(response)，看看返回的路线数据里有没有steps数组，确保数据存在

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