Gmaps.js Маршрут с несколькими маркерами

Question

Я пытаюсь построить нечто похожее на this example.

рабочий процесс на примере заключается в следующем:

1. добавить 2 маркеров на карте.
2. нажмите «получить маршрут»
3. продолжайте нажимать вперед, пока вы не получите от точки А до точки В

Если пользователь вводит третий маркер -> нажмите получить маршрут и т.д., оригинальный маршрут получает перерисованы.

Что я хочу достичь, так это следующее. У меня есть фиксированное место назначения, и пользователь вставляет один маркер, щелкает 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() 
     }); 
    } 
    }); 

Может ли вы сказать, если я что-то пропустил? Когда создается новый маршрут, я, очевидно, передаю правильный, так как он набирается.

Проблема заключается в том, что пользователь впервые нажимает кнопку «вперед» после вставки второго маркера, потому что два шага запускаются сразу. Третий раз, 3 ступени, 4-й раз 4 шага, и т.д.

Большое спасибо

Edit: jsBin

Answer 1

удалось решить эту проблему.

Кажется, что события «вперед» и «назад» были разбухающими, поэтому это было причиной поведения, которое у него было. (1 шаг за клик 1-й маркер, 2 шага за клик 2-й маркер, 3 шага за клик 3-й маркер и т. Д.).

Я добавил:

e.stopImmediatePropagation(); 

в конце обоих обработчиков событий вперед и назад щелчка. Работа в ожидании сейчас