带有google方向API的目的地数组 [英] Array of destinations with google direction API

问题描述

我是javascript新手，并且在谷歌方向上遇到了这个问题：

我有一张包含不同位置坐标的表格：

  lieux = [
 {nom：place1，icon：galerie.png，coordinates： [46.2018773,6.1396896]}，
 {nom：place2，icon：galerie.png，coordinates：[46.1989726,6.1371983]}，
 {nom： place3，icon：galerie.png，coordinates：[46.1976313,6.1382951]}，
 {nom：place4，icon：galerie.png，coordinates ：[46.1997394，6.1388766]} 
]; 
  

我想为每个计算行程的地点创建方向按钮。这里是计算路径的函数，它在initialiser（）之外（$）。日志（误差）;
};

函数successfunction（position）{
myLatitude = position.coords.latitude;
myLongitude = position.coords.longitude;
};

calcul_itin = function（）{
origin = myLatitude +，+ myLongitude;
for（i = 0; i lieuxLat = place [i] .coordinates [0];
lieuxLong =放置[i] .coordinates [1];
destination = placeLat +，+ placeLong;
}
if（origin& destination）{
var request = {
origin：origin，
destination：destination，
travelMode：google .maps.DirectionsTravelMode.WALKING
}
var directionsService = new google.maps.DirectionsService（）;
directionsService.route（request，function（response，status）{
if（status == google.maps.DirectionsStatus.OK）{
direction.setDirections（response）;
}
}）;
};
};

但是，每个按钮都会为表格的最后一位计算行程，我不知道如果我正确理解你想要的是计算最短（或最快）的路径从一个位置到很多目的地，并且您需要详细的路径信息才能在地图上实际显示这些路径。

我认为您的问题是你只提出一次从目的地到目的地的最后一个目的地的单程旅行的请求。所有其他目的地都将被覆盖，因为对路线服务的请求位于之后通过目的地的循环。您需要为每次旅行制作一个单独的请求，并且每个方向结果需要分别进行渲染，方法是使用您自己的实现或单独的DirectionsRenderer。因此，您对路线服务的呼叫需要放在 循环中之内。您还需要管理渲染器，因为您可能希望在对 calcul_itin 进行新调用时移除旧渲染器。

下面的代码说明了这种方法。可能你会想要个性化路径和标记。

  var directionRenderers = []; //数组用于跟踪渲染器
 calcul_itin = function（origin）{
 //删除以前的渲染器
 for（var i = 0; i< directionRenderers.length; i ++）{
 directionRenderers [i] .setMap（null）; 
} 
 directionRenderers = []; 
 //为每个目的地创建一个请求
 for（i = 0; i< lieux.length; i ++）{//猜测目的地是在哪里... 
 var dest = lieux [i] .coordinates [0] +'，'+ lieux [i] .coordinates [1]; 
 var request = {
 origin：origin，//假设origin是google.maps.LatLng的一个实例
 destination：dest，
 travelMode：google.maps.DirectionsTravelMode.WALKING 
}; 
 var directionsService = new google.maps.DirectionsService（）; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 //为这条路线创建一个新的DirectionsRenderer 
 var dirRenderer = new google.maps.DirectionsRenderer（{map：map}）; 
 dirRenderer.setDirections（response）; 
 directionRenderers.push（dirRenderer）; //跟踪渲染器
 } 
}）; 
} 
}; 
  

请注意 Google Directions API 具有配额和费率限制，并且上述方法对此服务提出了很多请求，因此请注意不要使用太多的目的地。

如果您只需要多个出发地/目的地的距离和出行时间，则最好使用 Google距离矩阵API 。但在这种情况下，您将无法获得详细的路径信息。

I'm new to javascript and I have this problem with google directions :

I have a table that contains the coordinates of different places like :

lieux = [
    {"nom": "place1", "icon": "galerie.png", "coordinates": [46.2018773, 6.1396896]},
    {"nom": "place2", "icon": "galerie.png", "coordinates": [46.1989726, 6.1371983]},
    {"nom": "place3", "icon": "galerie.png",    "coordinates": [46.1976313, 6.1382951]},
    {"nom": "place4", "icon": "galerie.png", "coordinates": [46.1997394, 6.1388766]}
];

I'd like to create direction button for each place that calculate the itinerary to it. Here is the function that calculate the path, it's outside initialiser()

function errorfunction(error){
    console.log(error);
};   

function successfunction(position){
    myLatitude = position.coords.latitude;
    myLongitude = position.coords.longitude;
};

calcul_itin = function() {                                                              
    origin = myLatitude+","+myLongitude;                                                
    for (i = 0; i < place.length; i++) {
        lieuxLat = place[i].coordinates[0];                                             
        lieuxLong = place[i].coordinates[1];
        destination = placeLat+","+placeLong;                                           
    }
    if(origin && destination){
        var request = {
            origin      : origin,
            destination : destination,
            travelMode  : google.maps.DirectionsTravelMode.WALKING                      
        }
        var directionsService = new google.maps.DirectionsService();                    
        directionsService.route(request, function(response, status){                    
            if(status == google.maps.DirectionsStatus.OK){
                direction.setDirections(response);                                      
            }
        });
    }; 
};

But, every button calculate itinerary for the last place of the table, and I don't know how to arrange my code to change that.

解决方案

If I understand correctly what you want is to calculate the shortest (or fastest) path from one location to many destinations, and you need to have detailed path information to actually display these paths on a map.

I think your problem is that you make only a request for one single trip from the origin to the last destination in your list of destinations. All other destinations are overwritten because the request to the Directions Service is located after your loop through the destinations. You need to make a separate request for each trip, and each directions result needs to be rendered separately, by using your own implementation or a separate DirectionsRenderer. Therefore, your call to the Directions Service needs to be inside the for loop. You also need to manage the renderers, as you probably want to remove old renderers when a new call to calcul_itin is made.

The following code illustrates this approach. Probably, you will want to personalise paths and markers.

var directionRenderers = [];    // array for keeping track of renderers
calcul_itin = function(origin) {
    // Remove previous renderers
    for (var i=0; i < directionRenderers.length; i++) {
        directionRenderers[i].setMap(null);
    }
    directionRenderers = [];
    // create a request for each destination
    for (i = 0; i < lieux.length; i++) {    // guess destinations are in lieux...
        var dest = lieux[i].coordinates[0] +','+ lieux[i].coordinates[1];
        var request = {
            origin: origin,     // assume origin is an instance of google.maps.LatLng
            destination: dest,
            travelMode: google.maps.DirectionsTravelMode.WALKING
        };
        var directionsService = new google.maps.DirectionsService(); 
        directionsService.route(request, function(response, status){                    
            if(status == google.maps.DirectionsStatus.OK){
                // create a new DirectionsRenderer for this route
                var dirRenderer = new google.maps.DirectionsRenderer({map: map});
                dirRenderer.setDirections(response);
                directionRenderers.push(dirRenderer);   // track the renderers
            }
        });
    }
};

Note also that Google Directions API has quota and rate limits, and the above approach makes many requests to this service, so be careful not to use too many destinations.

If you only need distance and travel time for multiple origins/destinations, you are better off using the Google Distance Matrix API. But you will not get detailed path information in this case.

这篇关于带有google方向API的目的地数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！