Question

我正在尝试构建类似于this example的内容。

示例的工作流程如下：

添加2个标记进行映射。
点击＆＃34;获取路线＆＃34;
继续点击，直到从A点到达B点

如果用户插入第三个标记 - ＆gt;点击获取路线等，原始路线重新绘制。

我想要实现的目标如下。我有一个固定的目的地，用户插入一个标记，点击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()
      });
    }
  });

你能说出我在这里遗失了什么吗？当一条新路线被创建时，我正在传递正确的路线，因为它是被绘制的路线。

问题出在用户第一次点击＆＃34;转发＆＃34;插入第二个标记后，因为这两个步骤一次运行。第三次，3步，第4次4步等。

非常感谢

修改：jsBin

Answer 1

管理以解决此问题。

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

我补充说：

    e.stopImmediatePropagation();

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

Gmaps.js具有多个标记的路线

1 个答案: