Google Maps API v3 не перерисовка направления правильно

Question

Я создал небольшой тестовый проект в здесь: http://jsfiddle.net/jochenhebbrecht/k3a3fvq0/3/

I чистые маршруты, используя следующий метод:

// 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

К сожалению, вы не можете этого сделать.

Обновить код, как показано ниже, и вы увидите, что происходит:

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

вы получите несколько OVER_QUERY_LIMIT сообщения о состоянии.

Более подробную информацию можно найти здесь:

• https://developers.google.com/maps/documentation/business/articles/usage_limits
• https://developers.google.com/maps/documentation/javascript/directions#DirectionsStatus

Answer 2

Проверьте состояние возвращенный направления запросов. Если они сбой из-за 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); 
     } 
    } 
    } 
}