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);
    }
}

我有一个复选框，显示地图上的一些路线。如果选中该框，则会显示路线。如果取消选中此框，则会删除路线。

但是，如果我再次选中该框（第二次），并非所有路线都正确呈现。你必须检查/取消选中几次让它工作......

知道我做错了吗？

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);
      }
    }
  }
}

Answer 2

不幸的是你做不到。

如下所示更新您的代码，您将看到会发生什么：

if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(result);
} else {
    alert(status);
}

您将收到多条OVER_QUERY_LIMIT状态消息。

可在此处找到更多信息：

Google Maps API v3未正确重新发布指示

2 个答案: