javascript - Google Maps API v3 未正确重新渲染方向

Question

我在这里创建了一个小型测试项目:http://jsfiddle.net/jochenhebbrecht/k3a3fvq0/3/

我使用以下方法清理路由:

// Clean previous routes
if (directionsDisplays.length > 0) {
    for(var i = 0; i < directionsDisplays.length; i++) {
        directionsDisplays[i].setMap(null);
    }
    directionsDisplays.length = 0;
}

我使用以下方法绘制路线:

// Draw all routes
if (routes.length > 0) {
    for (var i = 0; i < routes.length; i++) {
        (function(i){
            var route = routes[i];
            var request = {
                origin: route.origin,
                destination: route.destination,
                travelMode: google.maps.TravelMode.WALKING,
                waypoints: route.waypoints
            };

            var directionsDisplay = new google.maps.DirectionsRenderer({
                suppressMarkers: true,
                preserveViewport: true,
                polylineOptions: {
                    strokeColor: '#C6D300'
                }
            });
            directionsDisplay.setMap(map);
            directionsDisplays.push(directionsDisplay);

            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                }
            });
        })(i);
    }
}

我有一个复选框，可以在 map 上显示一些路线。如果选中该框，则会显示路线。如果取消选中该框，路线将被删除。

但是，如果我再次选中该框(第二次)，则并非所有路线都会正确呈现。您必须选中/取消选中几次才能使其正常工作...

知道我做错了什么吗？

Answer 1

检查您的路线请求返回的状态。如果由于 OVER_QUERY_LIMIT 而失败，请延迟一小会儿并重试失败的请求。另外，不要在每次显示路线时都请求路线，如果路线已经可用，请重新显示路线。

请注意，上述方法仅适用于您当前拥有的相同数量级的路线，如果您有更多的路线，速度将会非常慢。

proof of concept fiddle

function highlightRoutes() {
  if (directionsDisplays.length > 0 && (directionsDisplays[0].getMap() == null)) {
    // redisplay the routes 
    for (var i = 0; i < directionsDisplays.length; i++) {
      directionsDisplays[i].setMap(map);
    }
  } else if (directionsDisplays.length > 0 && (directionsDisplays[0].getMap() != null)) {
    // hide the routes 
    for (var i = 0; i < directionsDisplays.length; i++) {
      directionsDisplays[i].setMap(null);
    }
  } else {
    var routes = new Array();

    if (jQuery('#chkBxBikeRoutes').attr('checked')) {
      routes.push.apply(routes, getBikeRoutes());
    }

    // Clean previous routes
    if (directionsDisplays.length > 0) {
      for (var i = 0; i < directionsDisplays.length; i++) {
        directionsDisplays[i].setMap(null);
      }
      directionsDisplays.length = 0;
    }

    // Draw all routes
    if (routes.length > 0) {
      for (var i = 0; i < routes.length; i++) {
        (function(i) {
          var route = routes[i];
          var request = {
            origin: route.origin,
            destination: route.destination,
            travelMode: google.maps.TravelMode.WALKING,
            waypoints: route.waypoints
          };

          var directionsDisplay = new google.maps.DirectionsRenderer({
            suppressMarkers: true,
            preserveViewport: true,
            polylineOptions: {
              strokeColor: '#C6D300'
            }
          });
          directionsDisplay.setMap(map);
          directionsDisplays.push(directionsDisplay);

          directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(result);
            } else if (status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT) {
              //document.getElementById("status").innerHTML += request.origin+":"+request.destination+"status:"+status+"<br>";
              setTimeout(function() {
                directionsService.route(request, function(result, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                  } else {
                    document.getElementById("status").innerHTML += request.origin + ":" + request.destination + "status:" + status + "<br>";
                  }
                })
              }, 2000);
            } else {
              document.getElementById("status").innerHTML += request.origin + ":" + request.destination + "status:" + status + "<br>";
            }
          });
        })(i);
      }
    }
  }
}