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

【问题标题】：Gmaps.js Route with multiple markers带有多个标记的 Gmaps.js 路由
【发布时间】：2015-07-10 14:54:20
【问题描述】：

我正在尝试构建类似于this example 的东西。

示例的工作流程如下：

向地图添加 2 个标记。
点击“获取路线”
继续点击，直到您从 A 点到达 B 点

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

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

我面临的问题如下。在第二个标记上，用户第一次向前单击时，他一次绘制了两步，之后又画了两步，依此类推。第三个标记，每次单击 3 步。第 4 个标记，每次点击 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步，等等。

非常感谢

编辑：jsBin

【问题讨论】：

你能发个 jsfiddle 吗？
编辑过的原帖
我能看到的唯一可能导致问题的是您的计数器。确保每次绘制新路径时都重置它。
每次单击“获取路线”按钮时都会重置它。我认为计数器与我面临的问题没有任何关系，因为如果我们完全删除它，我们可以观察到相同的行为。我开始认为我可能需要在原始 gmaps.js 代码中进行一些调整，当我发现时会在这里发布

标签： javascript jquery google-maps-api-3 routes gmaps.js

【解决方案1】：

设法解决了这个问题。

似乎“前进”和“后退”点击事件是冒泡传播的，所以这就是它所具有的行为的原因。（每点击 1 步第 1 标记，每点击 2 步第 2 标记，每点击 3 步第 3 标记等）。

我补充说：

    e.stopImmediatePropagation();

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

【讨论】：