Question

我在转机模式下使用带有路线服务的Google地图，并尝试在方向文字显示中显示的步骤下方添加一些链接。

当步骤模式为WALKING时，其持续时间为＆gt; 100秒后，该链接将添加到其<td>容器的底部。

我正在努力避免自己处理基于文本的方向呈现，并希望使用setPanel()的{{1}}方法。

有关示例，请参阅屏幕截图：

enter image description here

我试图通过循环通过DirectionService收到的响应来修改步骤，我唯一能做的就是修改文本。

我还想过操纵DOM，但对如何根据当前结构选择它感到困惑。

以下是JSFiddle的链接，如果有人想玩它：http://jsfiddle.net/44j0dkv3/

Answer 1

可能的方法：

当您遍历这些步骤时，面板尚未填充，因此您无法通过DOM访问相关单元格。将所需的链接存储在某处，以便在链接和步骤索引之间建立关系。

渲染指示后，添加指向所需单元格的链接：

＆＃13;

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var directionRequest = {
    origin: 'Chicago',
    destination: 'Los Angeles',
    travelMode: google.maps.TravelMode.TRANSIT
};

directionsService.route(directionRequest, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        var tmp = {}
        var legs = response.routes[0].legs;
        for (i = 0; i < legs.length; i++) {
            var steps = legs[i].steps;
            for (j = 0; j < steps.length; j++) {
                if (steps[j].travel_mode == 'WALKING' && steps[j].duration.value > 100) {
                    tmp[j] =document.createElement('a');
                    tmp[j].appendChild(document.createTextNode('text for a custom link'));
                    tmp[j].setAttribute('href','#something')
                    steps[j].instructions = '## - ' + steps[j].instructions;
                    // this is the step on which I want to add link
                    // the link will be at the bottom within this step's <td> container
                }
            }
        }

        directionsDisplay.setDirections(response);
        
        //as it seems we need a short delay before the cells are accessible
        setTimeout(function () {
            var rows=document.querySelectorAll('#directions-panel table.adp-directions>tbody>tr[jsselect="steps"]');
            
            for(var k in tmp){
                rows.item(k).firstChild.appendChild(tmp[k]);
                rows.item(k).firstChild.style.background='tomato';
            }
        },10);
    }
});

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="directions-panel"></div>

＆＃13;

注意：我还没有对它进行过多次测试，可能是您必须修改访问单元格的方式，例如何时使用航点。也不能保证它将来会有效，因为面板的标记没有记录，因此它不能保持稳定。

将自定义链接添加到Google地图的文字显示方向的步骤中

1 个答案: