2016-03-15 75 views
0

我正在使用MapQuest單張Api ​​繪製多個站點(自定義標記)的路線。一切都快完成了。我得到一個路線多個標記和一個多重線。MapQuest Leaflet Api - 獲取時間和距離的優化路徑

我有兩個問題

  1. 如何繪製優化路由的onClick的
    按鈕路由優化
    代碼是這樣的
dir = MQ.routing.directions(); 
      dir.optimizedRoute({ 
       locations: [ 
        '33.703507, 73.053702', 
         '33.714328, 73.050625', 
         '33.730497, 73.077898', 
         '33.732863, 73.088078' 
       ] 
      }); 
  • 如何獲得泰坦總路線和時間開車?下面

    <script> 
        window.onload = function() { 
           var map, 
            dir; 
           var custom_icon, 
            marker; 
           map = L.map('map', { 
            layers: MQ.mapLayer(), 
            center: [40.045049, -105.961737], 
            zoom: 7 
           }); 
    
           dir = MQ.routing.directions(); 
           dir.route({ 
            locations: [ 
             '33.703507, 73.053702', 
             '33.714328, 73.050625', 
             '33.730497, 73.077898', 
             '33.732863, 73.088078' 
            ], 
            options: { avoids: ['toll road'] } 
           }); 
        CustomRouteLayer = MQ.Routing.RouteLayer.extend({ 
             createStopMarker: function (location, stopNumber) { 
    
    
              custom_icon = L.divIcon({ 
               iconSize: [26, 36], 
               popupAnchor: [0, -18], 
               html: '<span class="notification">' + stopNumber + '</span>' 
              }); 
              marker = L.marker(location.latLng, { icon: custom_icon }).bindPopup(location.adminArea5 + ' ' + location.adminArea3).openPopup().addTo(map); 
    
              marker.on('click', onMarkerClick); 
    
              return marker; 
             } 
            }); 
        map.addLayer(new CustomRouteLayer({ 
            directions: dir, 
            fitBounds: true, 
            draggable: false, 
            ribbonOptions: { 
             draggable: false, 
             ribbonDisplay: { color: '#CC0000', opacity: 0.3 }, 
             widths: [15, 15, 15, 15, 14, 13, 12, 12, 12, 11, 11, 11, 11, 12, 13, 14, 15] 
            } 
           })); 
        } 
        </script> 
        <body style='border:0; margin: 0'> 
         <div id='map' style='position: absolute; top: 0; bottom: 0; width: 100%;'></div> 
        </body> 
    

  • 我的代碼,請給予幫助。謝謝:)

    回答

    1

    該按鈕將調用一個函數,其中包含MQ.routing.directions.optimizedRoute()代碼。

    function optimize() { 
        dir = MQ.routing.directions(); 
    
        dir.optimizedRoute({ 
        locations: [ 
         'syracuse ny', 
         'springfield ma', 
         'ithaca ny', 
         'hartford ct' 
        ] 
        }); 
    
        map.addLayer(MQ.routing.routeLayer({ 
        directions: dir, 
        fitBounds: true 
        })); 
    } 
    

    要獲得里程,請使用成功事件來獲得整個路線響應。

    dir = MQ.routing.directions() 
        .on('success', function(data) { 
        console.log(data.route.distance); 
        }); 
    
    +0

    非常感謝。它工作完美。 data.route.distance將以米或公里爲單位的距離? data.route.time會在幾分鐘或幾秒內給出時間? –

    +0

    爲什麼這段代碼運行兩次? dir = MQ.routing.directions() .on('success',function(data){ console.log(data.route.distance); }第一次給出確切的值,下一次給出未定義的值。 ); @MQBrian –

    +0

    它第二次運行來自routeshape請求。在進一步處理之前,您可以檢查響應中的對象。默認距離以英里爲單位,但單位參數可以在選項中更改。時間以秒爲單位。 – MQBrian