多标记Gmaps.js路径

Question

我正在尝试构建类似于这个例子的东西。

该示例的工作流如下：

1. 添加2个标记来绘制地图。
2. 点击“获取路线”
3. 继续向前点击，直到你从A点到达B点

如果用户插入第三个标记->，单击get路由等，则重新绘制原始路由。

我想要达到的目标如下。我有一个固定的目的地，用户插入一个标记，单击get_route，然后向前移动，直到绘制路由，每次一个步骤。到目前一切尚好。我使用户可以添加第二个标记，单击get路由，并查看绘制到目的地的路由。

我所面临的问题如下。在第二个标记上，当用户第一次单击前进时，他一次得到两个步骤，然后再画另外两个，等等。第三个标记，每次点击3个步骤。第四个标记，每次点击4个步骤，等等。下面是代码：

$(document).ready(function(){
  $('#forward').attr('disabled', 'disabled');
  $('#back').attr('disabled', 'disabled');    
  $('#get_route').click(function(e){
    e.preventDefault();
    count = 0;
    map.getRoutes({
      origin: [map.markers[map.markers.length-1].getPosition().lat(), map.markers[map.markers.length-1].getPosition().lng()],
      destination: [meetinglat, meetinglng],
      travelMode : google.maps.TravelMode.WALKING,
      callback: function(e){
        route = new GMaps.Route({
          map: map,
          route: e[e.length-1], // e[0] initially
          strokeColor: '#336699',
          strokeOpacity: 0.5,
          strokeWeight: 10,
          destination: [meetinglat, meetinglng]
        });         
        $('#forward').removeAttr('disabled');
        $('#back').removeAttr('disabled');
      }
    });
    $('#forward').click(function(e){
      e.preventDefault();
      route.forward();

      if(route.step_count <= route.steps_length && count < route.steps_length){
        count++;
        $('#steps').append('<li>'+route.step_count+' '+route.steps[route.step_count-1].instructions+'</li>');
        $("#container").scrollTop($("#container")[0].scrollHeight);
      }
    });
    $('#back').click(function(e){
      e.preventDefault();
      route.back();

      if(route.step_count >= 0){
        $('#steps').find('li').last().remove();
        count--;
        }
    });
  });

  map = new GMaps({
    el: '#map',
    lat: meetinglat,
    lng: meetinglng,
    zoom: 17,
    height: '500px',
    click: function(e){
      map.addMarker({
        lat: e.latLng.lat(),
        lng: e.latLng.lng()
      });
    }
  });

你能看出我是不是漏掉了什么东西吗？当一个新的路径被创建时，我显然是在传递正确的路径，因为被绘制的是正确的路径。

问题是用户在插入第二个标记后第一次单击“前进”，因为这两个步骤同时运行。第三次，第三次，第四次，第四次，等等。

非常感谢

编辑：jsBin

Answer 1

设法解决了这个问题。

似乎“前进”和“后退”点击事件是冒泡-传播，所以这是其行为的原因。(每次点击第1标记1步，每次点击第2标记2步，每次点击第3标记3步)。

我补充说：

    e.stopImmediatePropagation();

在前向和后向的末尾，单击事件处理程序。现在按预期工作