谷歌地图API v3不能正确地重新渲染方向

Google Maps API v3 is not rerendering directions correctly

本文关键字：新渲染 方向 正确地 不能 API v3 谷歌地图      更新时间：2023-09-26

我在这里创建了一个小测试项目: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);
    }
}
我有一个在地图上显示一些路线的复选框。如果勾选该框，就会显示路线。如果你取消选中，路由将被移除。

然而，如果我再次选中这个复选框(第二次)，并不是所有的路由都被正确呈现。你必须勾选/取消勾选几次才能让它工作……

知道我做错了什么吗?

查看您的方向请求返回的状态。如果它们由于OVER_QUERY_LIMIT而失败，请延迟一会儿，然后重试失败的请求。另外，不要在每次显示路由时都请求它们，如果它们已经可用，则重新显示路由。

注意，上面的方法只适用于你当前拥有的相同数量级的路由，如果你有很多更多的路由，它将会非常慢。

概念验证

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

遗憾的是，您不能这样做。

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

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
相关文章：