Javascript 带有多个标记的Gmaps.js路由

我正在尝试建立类似的东西

该示例的工作流如下所示：

添加2个标记到地图

单击“获取路线”

继续向前单击，直到从A点到达B点

如果用户插入第三个标记->单击获取路线等，则原始路线将被重新绘制

我想要实现的是以下目标。我有一个固定的目的地，用户插入一个标记，单击get_route，然后前进，直到绘制路线，每次一步。到现在为止，一直都还不错。 我使用户可以添加第二个标记，单击“获取路线”，然后查看绘制到目的地的路线

我面临的问题如下。在第二个标记上，用户第一次单击“前进”，他一次绘制两个步骤，然后再绘制两个步骤，以此类推。第三个标记，每次单击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()
      });
    }
  });

$（文档）.ready（函数（）{
$（'#forward'）.attr（'disabled'，'disabled'）；
$（'#back'）.attr（'disabled'，'disabled'）；
$（“#获取路径”）。单击（函数（e）{
e、 预防默认值（）；
计数=0；
map.getRoutes({
原点：[map.markers[map.markers.length-1].getPosition（）.lat（），map.markers[map.markers.length-1].getPosition（）.lng（），
目的地：[meetinglat，meetinglng]，
travelMode:google.maps.travelMode.WALKING，
回调：函数（e）{
路由=新的GMAP。路由({
地图：地图，
路由：e[e.length-1]，//最初为e[0]
strokeColor:“#336699”，
笔划不透明度：0.5，
冲程重量：10，
目的地：[meetinglat，meetinglng]
});         
$（'向前'）.removeAttr（'禁用'）；
$（'#back'）.removeAttr（'disabled'）；
}
});
$（“#前进”）。单击（函数（e）{
e、 预防默认值（）；
前进路线（）；
如果（route.step_count=0）{
$（'#steps'）.find（'li'）.last（）.remove（）；
计数--；
}
});
});
map=新的gmap({
el:'地图'，
lat:meetinglat，
液化天然气：会议液化天然气，
缩放：17，
高度：“500px”，
点击：功能（e）{
map.addMarker({
lat:e.latLng.lat（），
液化天然气：e.latLng.lng（）
});
}
});

你能告诉我这里是否遗漏了什么吗？当一条新的路线被创建时，我显然通过了正确的路线，因为它是被绘制的路线

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

非常感谢

---

编辑：

已设法解决该问题

“向前”和“向后”点击事件似乎是冒泡传播，因此这就是其行为的原因。（每点击1次标记1步，每点击2次标记2步，每点击3次标记3步等）

我补充说：

    e.stopImmediatePropagation();

---

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

您可以发布JSFIDLE吗？编辑的原始帖子我看到唯一可能导致问题的是您的计数器。请确保每次绘制新路径时都重置它。我每次“获取路径”时都重置它按钮被点击。我不认为计数器与我所面临的问题有任何关系，因为如果我们完全删除它，我们可以观察到相同的行为。我开始认为我可能必须调整原始gmaps.js代码中的某些内容，我发现后会在这里发布