Google地图渲染路线的适合边界

问题描述

我试图为48个航点提供路线，但Google只允许为每个请求提供8个航点。所以我做了多个请求（在我的情况6）。但是，API以某种方式为最后一次请求提供了fitBounds（）。

如何使用fitBounds（）和/或setZoom（）在一个地图中显示所有48个航点

我的代码如下： -

 函数DisplayDirection（directionList ）{
 
 var interval = 8; //在谷歌方向使用限制的上限API是8 
 var startIndex = 0; 
 var maxmimumIndex = directionList.length-1; //此路线中的航点总数
 var partialEndIndex = interval-1; //在开始处结束航点
 var iteration = 0; //循环控制器
 directionsService = new google.maps.DirectionsService（）; 
 var resultSet = new Array（）; 
 var directionsDisplayList = new Array（）; 
 var resultsCached = 0; 
 var bounds = new google.maps.LatLngBounds（）; 
 
 do {//do...while迭代多个请求
 iteration ++; 
 if（iteration> 1）{
 startIndex = startIndex + interval; 
 partialEndIndex = startIndex + interval; 
} 
 
 var directionsDisplay = new google.maps.DirectionsRenderer（{
 markerOptions：{
 visible：false 
} 
}）; 
 directionsDisplayList.push（
 directionsDisplay 
）; 
 
 directionsDisplayList [iteration-1] .setMap（map）; 
 
 var origin = directionList [startIndex]; 
 var destination = partialEndIndex< maxmimumIndex？ directionList [partialEndIndex]：directionList [maxmimumIndex]; 
 waypoints = new Array（）; （i> startIndex + 1; i< partialEndIndex; i ++）{
 if（i> maxmimumIndex）{
 break; 
 $ b $ 
} 
 
 waypoints.push（
 {
位置：directionList [i]，
中途停留：true 
} 
） ; 
 latlong = directionList [i] .split（，）; // 
 lat = latlong [0]; // 
 lng = latlong [1]; // 
 bounds.extend（new google.maps.LatLng（lat，lng））; //延伸边界
} 
 
 var request = {
 origin：origin，
 destination：destination，
 waypoints：waypoints，
 provideRouteAlternatives：false，
 travelMode：google.maps.TravelMode.WALKING，
 unitSystem：google.maps.UnitSystem.METRIC 
} 
 
 directionsService.route（request，函数（结果，状态）{
 if（status == google.maps.DirectionsStatus.OK）{
 //结果结果以呈现方向// 
 resultSet.push（result）; 
 if（resultSet.length == iteration）{
 for（var i = 0; i< iteration; i ++）{
 directionsDisplayList [i] .setDirections（resultSet [i]）; 
} 
 map.fitBounds（bounds）; 
} 
} 
}）; 
 
} while（partialEndIndex< = maxmimumIndex）; 
 
  

解决方案

code> fitBounds（）在最后一次请求时发生。

如何使用 latlngs 来源和目的地并执行 fitBounds（）在最后一次请求之后手动编码？我认为应该做这项工作。

I am trying to render directions for 48 waypoints, but google only allows 8 waypoints to be rendered per request. so I do multiple requests (in my case 6). However, the API somehow doed fitBounds() for the last request.

How can I show all the 48 waypoints in one map using fitBounds() and/or setZoom()

My code is as below: -

function DisplayDirection(directionList){

    var interval = 8; // upper bound for usage limits in google directions API is 8
    var startIndex =0;
    var maxmimumIndex = directionList.length-1; // Total number of waypoints in this route
    var partialEndIndex = interval-1; // end waypoint at start
    var iteration = 0; // loop controler
    directionsService = new google.maps.DirectionsService();
    var resultSet = new Array();
    var directionsDisplayList = new Array();
    var resultsCached = 0;
    var bounds = new google.maps.LatLngBounds();

    do { //do...while to iterate over multiple requests
        iteration++;
        if(iteration>1){
            startIndex = startIndex+interval;
            partialEndIndex = startIndex+interval;
        }

        var directionsDisplay = new google.maps.DirectionsRenderer({
                markerOptions: {
                    visible:false
                }      
            });
        directionsDisplayList.push(
            directionsDisplay
        ); 

        directionsDisplayList[iteration-1].setMap(map);

        var origin = directionList[startIndex];
        var destination = partialEndIndex < maxmimumIndex ? directionList[partialEndIndex]:directionList[maxmimumIndex];
        waypoints = new Array();

        for(var i=startIndex+1;i<partialEndIndex;i++){
            if(i>maxmimumIndex){                
                break;
            }       

            waypoints.push(
                {
                    location:directionList[i],
                    stopover:true
                }
            );
            latlong = directionList[i].split(","); //
            lat = latlong[0];  //
            lng = latlong[1]; //
            bounds.extend (new google.maps.LatLng(lat,lng)); //extend the bounds            
        }

        var request = {
            origin: origin,
            destination: destination,
            waypoints : waypoints,
            provideRouteAlternatives:false,
            travelMode: google.maps.TravelMode.WALKING,
            unitSystem: google.maps.UnitSystem.METRIC
        }

        directionsService.route(request, function(result, status) {
            if(status == google.maps.DirectionsStatus.OK) {
                //Cashe the results to render directions//
                resultSet.push(result);                             
                if(resultSet.length==iteration){
                    for(var i=0; i<iteration; i++){
                        directionsDisplayList[i].setDirections(resultSet[i]);                                                           
                    }
                    map.fitBounds(bounds);                  
                }                   
            }           
        });

    }while (partialEndIndex <= maxmimumIndex);      
}

解决方案

You cannot prevent from a fitBounds() to happen at the last request.

How about using the latlngs of origin and destination and do a fitBounds() manually in coding after the last request? I think that should do the work.

这篇关于Google地图渲染路线的适合边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！