Google Maps v3 API：通过拖动更改路线时如何更新标记的位置？

Question

根据GoogleMapsv3APIExample 的示例，我正在尝试以下方法：

• 我有一条从 A 到 B 的路线，上面有一些标记：
• 我通过拖动“过渡航路点”（以白色圆圈显示）来修改路线
• 我希望将标记更新为新路线

我改编了这个 gist 中的链接示例：

• 在第 37-39 行，我为 directions_changed 事件添加了一个侦听器
• 在 recalculateMarkers 中，我将所有标记设置为 null 并将它们再次放置在地图上
• directionsDisplay.directions 似乎仍然包含旧路线（拖动前）
• 我得到的结果是这样的：

有什么建议吗？

谢谢！

Answer 1

问题出在directions_changed 事件中：当呈现的方向发生变化时触发此事件，无论是设置了新的 DirectionsResult 还是当用户完成将更改拖动到方向路径时。 p>

当calcRoute() 完成时，会创建两组标记：一组来自recalculateMarkers()，另一组来自calcRoute()。

必须将事件侦听器移至calcRoute() 并在路由成功时进行设置：

function calcRoute() {

    var request = {
        origin: 'Sydney, NSW',
        destination: 'Broken Hill, NSW',
        travelMode: google.maps.TravelMode.DRIVING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            showSteps(response);

            google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
                console.log('directions_changed');
                recalculateMarkers();
            });
        }
    });
}

见example at jsbin。