Bing地图路线优化

发布于 2025-01-24 04:04:10 字数 1618 浏览 3 评论 0原文

我正在尝试使用bing Maps生成一条优化的路线， https://lealen.microsoft.com/en-us/bingmaps/rest-services/examples/optimized-waypoints-waypoints-example#example 屏幕上的结果路线。对于普通路线，我正在使用此例程，该例程似乎足够好...

function traceRoute(){
   infobox.setOptions({visible:false});
    
   if(Object.entries(fromCoords).length !== 0 && Object.entries(toCoords).length !== 0){
     Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
       var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

       directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });

       var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: fromCoords.title, location: new Microsoft.Maps.Location(fromCoords.lat,fromCoords.long) });
       var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: toCoords.title, location: new Microsoft.Maps.Location(toCoords.lat,toCoords.long) });

       directionsManager.addWaypoint(waypoint1);
       directionsManager.addWaypoint(waypoint2);
            
       // Set the element in which the itinerary will be rendered
       directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel') });
       directionsManager.calculateDirections();          
     });
   }
 }

但是，我无法弄清楚如何使用优化的API呼叫进行相同的操作。是否可以添加指向DirectionsManager并设置优化标志的方法列表？

原文

I am attempting to generate an optimized route using Bing Maps re this article, https://learn.microsoft.com/en-us/bingmaps/rest-services/examples/optimized-waypoints-example#example, but am struggling to know how to render the resultant route on screen. For normal routes I am using this routine which seems to work well enough...

function traceRoute(){
   infobox.setOptions({visible:false});
    
   if(Object.entries(fromCoords).length !== 0 && Object.entries(toCoords).length !== 0){
     Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
       var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

       directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });

       var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: fromCoords.title, location: new Microsoft.Maps.Location(fromCoords.lat,fromCoords.long) });
       var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: toCoords.title, location: new Microsoft.Maps.Location(toCoords.lat,toCoords.long) });

       directionsManager.addWaypoint(waypoint1);
       directionsManager.addWaypoint(waypoint2);
            
       // Set the element in which the itinerary will be rendered
       directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel') });
       directionsManager.calculateDirections();          
     });
   }
 }

However, I cannot figure out how to do they same with an optimised API call. Is it possible to add a list of way points to the directionsManager and set an Optimised flag?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱的十字路口 2025-01-31 04:04:10

挖掘文档并试图逆转指示模块/管理器，在模块中似乎没有任何支持此选项的支持。

一种解决方案是直接致电休息服务以获取航路点的优化订购，然后将这些订购的航点传递到Directions Manager。这将使您能够利用方向模块的渲染功能，从而使开发变得更加容易。

这是一个代码样本：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=<Your Bing Maps Key>'></script>
        
    <script>
    var map, directionsManager;
    
    //Get optimized waypoint orders based on time with traffic, and only get minimial information back.
    var directionsUrl = 'http://dev.virtualearth.net/REST/V1/Routes/Driving?&optimizeWaypoints=true&optimize=timeWithTraffic&routeAttributes=excludeItinerary&key={key}';

    function GetMap()
    {
        map = new Microsoft.Maps.Map('#myMap', {});

        //Load the directions module.
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
            //Create an instance of the directions manager.
            directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
            directionsManager.setRequestOptions({ routeOptimization: 'timeWithTraffic' });

            //Pass in waypoints to calculate optimized order.
            calculateOptimizedOrder([
                
                new Microsoft.Maps.Directions.Waypoint({ address: '86 Pike Pl, Seattle, WA 98101' }),
                new Microsoft.Maps.Directions.Waypoint({ address: 'Troll Ave N, Seattle, WA 98103' }),
                new Microsoft.Maps.Directions.Waypoint({ address: '3800 Montlake Blvd NE, Seattle, WA 98195' }),
                new Microsoft.Maps.Directions.Waypoint({ address: '1000 4th Ave, Seattle, WA 98104' }),
                new Microsoft.Maps.Directions.Waypoint({ address: '5400 Ballard Ave NW, Seattle, WA 98107' })
            ]);
        });
    }
    
    function calculateOptimizedOrder(waypoints) {
        map.getCredentials((sessionId) => {
            //Add the key to the REST request.
            var request = [directionsUrl.replace('{key}', sessionId)];
            
            //Add the waypoints to the REST request.
            for(var i=0;i<waypoints.length;i++){
                var wp = waypoints[i];
                
                request.push('&wp.', i, '=');
                
                var loc = wp.getLocation();
                var add = wp.getAddress();
                
                if(loc) {
                    request.push(loc.toString());
                } else if(add){
                    request.push(encodeURIComponent(add));
                } else {
                    throw 'No waypoint info provided';
                }
            }   
            
            //Combine the request parts to create the URL.
            var url = request.join('');
            
            //Process the request.
            fetch(url).then(r => r.json()).then(r => {
            
                var orderedWaypoints = [];
                
                var waypointsOrder = r.resourceSets[0].resources[0].waypointsOrder;
                
                for(var i=0;i<waypointsOrder.length;i++){
                    //Extract the number from the waypoint order text.
                    var idx = parseInt(waypointsOrder[i].replace('wp.',''));
                    
                    //Cross reference the original waypoints.
                    orderedWaypoints.push(waypoints[idx]);
                }
                
                //Calculate and render directions using the optimized order.
                calculateDirections(orderedWaypoints);

                alert('Optimized order: ' + waypointsOrder.join(','));          
            });
        });     
    }
    
    
    function calculateDirections(orderedWaypoints) {
    
        for(var i=0;i< orderedWaypoints.length;i++){
            directionsManager.addWaypoint(orderedWaypoints[i]);
        }
        
        //Calculate directions.
        directionsManager.calculateDirections();
    }
    </script>
    
</head>
<body>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>

Digging through the documentation and trying to reverse engineer the directions module/manager, there doesn't appear to be any support for this option in the module.

One solution would be to call the REST service directly to get the optimized ordering of the waypoints, then pass those ordered waypoints into the directions manager. This will allow you to leverage the rendering capabilities of the directions module which will make development a lot easier.

Here is a code sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=<Your Bing Maps Key>'></script>
        
    <script>
    var map, directionsManager;
    
    //Get optimized waypoint orders based on time with traffic, and only get minimial information back.
    var directionsUrl = 'http://dev.virtualearth.net/REST/V1/Routes/Driving?&optimizeWaypoints=true&optimize=timeWithTraffic&routeAttributes=excludeItinerary&key={key}';

    function GetMap()
    {
        map = new Microsoft.Maps.Map('#myMap', {});

        //Load the directions module.
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
            //Create an instance of the directions manager.
            directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
            directionsManager.setRequestOptions({ routeOptimization: 'timeWithTraffic' });

            //Pass in waypoints to calculate optimized order.
            calculateOptimizedOrder([
                
                new Microsoft.Maps.Directions.Waypoint({ address: '86 Pike Pl, Seattle, WA 98101' }),
                new Microsoft.Maps.Directions.Waypoint({ address: 'Troll Ave N, Seattle, WA 98103' }),
                new Microsoft.Maps.Directions.Waypoint({ address: '3800 Montlake Blvd NE, Seattle, WA 98195' }),
                new Microsoft.Maps.Directions.Waypoint({ address: '1000 4th Ave, Seattle, WA 98104' }),
                new Microsoft.Maps.Directions.Waypoint({ address: '5400 Ballard Ave NW, Seattle, WA 98107' })
            ]);
        });
    }
    
    function calculateOptimizedOrder(waypoints) {
        map.getCredentials((sessionId) => {
            //Add the key to the REST request.
            var request = [directionsUrl.replace('{key}', sessionId)];
            
            //Add the waypoints to the REST request.
            for(var i=0;i<waypoints.length;i++){
                var wp = waypoints[i];
                
                request.push('&wp.', i, '=');
                
                var loc = wp.getLocation();
                var add = wp.getAddress();
                
                if(loc) {
                    request.push(loc.toString());
                } else if(add){
                    request.push(encodeURIComponent(add));
                } else {
                    throw 'No waypoint info provided';
                }
            }   
            
            //Combine the request parts to create the URL.
            var url = request.join('');
            
            //Process the request.
            fetch(url).then(r => r.json()).then(r => {
            
                var orderedWaypoints = [];
                
                var waypointsOrder = r.resourceSets[0].resources[0].waypointsOrder;
                
                for(var i=0;i<waypointsOrder.length;i++){
                    //Extract the number from the waypoint order text.
                    var idx = parseInt(waypointsOrder[i].replace('wp.',''));
                    
                    //Cross reference the original waypoints.
                    orderedWaypoints.push(waypoints[idx]);
                }
                
                //Calculate and render directions using the optimized order.
                calculateDirections(orderedWaypoints);

                alert('Optimized order: ' + waypointsOrder.join(','));          
            });
        });     
    }
    
    
    function calculateDirections(orderedWaypoints) {
    
        for(var i=0;i< orderedWaypoints.length;i++){
            directionsManager.addWaypoint(orderedWaypoints[i]);
        }
        
        //Calculate directions.
        directionsManager.calculateDirections();
    }
    </script>
    
</head>
<body>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>

回复收藏 0 原文

~没有更多了~