本文介绍了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地图渲染路线的适合边界的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-25 09:21