javascript - 将自定义链接添加到谷歌地图文本显示方向的步骤中

Question

我在交通模式下使用带有路线服务的 Google map ，并尝试在路线文本显示中显示的步骤下方添加一些链接。

当步骤的模式为WALKING时并且它的持续时间> 100秒，链接将添加在其<td>的底部容器。

我试图避免自己处理基于文本的方向的渲染，并希望使用 setPanel()方法DirectionsRenderer .

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

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

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

如果有人想玩的话，这里有一个 JSFiddle 的链接:http://jsfiddle.net/44j0dkv3/

Answer 1

一种可能的方法:

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

渲染方向后，将链接添加到所需的单元格:

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);
    }
});

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

注意:我没有对其进行太多测试，可能您必须修改访问单元格的方式，例如何时使用航路点。也不能保证它将来会起作用，因为面板的标记没有记录，所以它一定不稳定。