在路線中定期測定中間緯度/經度

Question

我試圖確定一箇中緯度經緯度列表&，假定從源到目的地的給定道路路線。

例如 - 假設我的來源是堪薩斯城，密蘇里州&目的地是芝加哥IL通過US-36 E和I-55 N.假設我現在要開始（沒有交通延誤），我怎麼能在這條路線上以1小時的間隔找到所有緯度/經度的列表？

Answer 1

一個選項將承擔旅行的恆定速率，並使用第三方庫epoly.js

// parse the distance and duration out of the response from the DirectionsService 
    var duration = 0; // seconds 
    var distance = 0; // meters 
    for (var i = 0; i < response.routes[0].legs.length; i++) { 
    duration += response.routes[0].legs[i].duration.value; 
    distance += response.routes[0].legs[i].distance.value; 
    } 
    var points = polyline.GetPointsAtDistance(distance/(duration/60/60)); 

proof of concept fiddle

代碼片段的GetPointsAtDistance方法：

var polyline; 
 

 
function initMap() { 
 
    var directionsService = new google.maps.DirectionsService; 
 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 7, 
 
    center: { 
 
     lat: 41.85, 
 
     lng: -87.65 
 
    } 
 
    }); 
 
    directionsDisplay.setMap(map); 
 
    polyline = new google.maps.Polyline({ 
 
    path: [], 
 
    strokeColor: '#0000FF', 
 
    strokeWeight: 3, 
 
    map: map 
 
    }); 
 

 
    var onChangeHandler = function() { 
 
    calculateAndDisplayRoute(directionsService, directionsDisplay, map); 
 
    }; 
 
    document.getElementById('btn').addEventListener('click', onChangeHandler); 
 
    calculateAndDisplayRoute(directionsService, directionsDisplay, map); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap); 
 

 
function calculateAndDisplayRoute(directionsService, directionsDisplay, map) { 
 
    directionsService.route({ 
 
    origin: document.getElementById('start').value, 
 
    destination: document.getElementById('end').value, 
 
    travelMode: 'DRIVING' 
 
    }, function(response, status) { 
 
    if (status === 'OK') { 
 
     // directionsDisplay.setDirections(response); 
 
     renderDirections(response, map); 
 
     var duration = 0; // seconds 
 
     var distance = 0; // meters 
 
     for (var i = 0; i < response.routes[0].legs.length; i++) { 
 
     duration += response.routes[0].legs[i].duration.value; 
 
     distance += response.routes[0].legs[i].distance.value; 
 
     } 
 
     document.getElementById('info').innerHTML = "total distance=" + (distance/1000).toFixed(2) + " km<br>total duration=" + (duration/60/60).toFixed(2) + " hours"; 
 
     var points = polyline.GetPointsAtDistance(distance/(duration/60/60)); 
 
     // verify the result 
 
     var request = { 
 
     waypoints: [], 
 
     travelMode: 'DRIVING' 
 
     }; 
 
     for (var i = 0; i < points.length; i++) { 
 
     var marker = new google.maps.Marker({ 
 
      map: map, 
 
      position: points[i], 
 
      title: "" + i 
 
     }); 
 
     if (i == 0) { 
 
      request.origin = marker.getPosition(); 
 
     } else if ((i > 0) && (i < (points.length - 1))) { 
 
      request.waypoints.push({ 
 
      location: marker.getPosition(), 
 
      stopover: true 
 
      }); 
 
     } else { 
 
      request.destination = marker.getPosition(); 
 
     } 
 
     } 
 
     directionsService.route(request, function(response, status) { 
 
     if (status === 'OK') { 
 
      directionsDisplay.setDirections(response); 
 
      directionsDisplay.setPanel(document.getElementById('dirPanel')); 
 
     } else { 
 
      window.alert('Directions request failed due to ' + status); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
} 
 

 
function renderDirections(response, map) { 
 
    // directionsDisplay.setDirections(response); 
 
    var bounds = new google.maps.LatLngBounds(); 
 

 
    var legs = response.routes[0].legs; 
 
    for (i = 0; i < legs.length; i++) { 
 
     var steps = legs[i].steps; 
 
     for (j = 0; j < steps.length; j++) { 
 
     var nextSegment = steps[j].path; 
 
     for (k = 0; k < nextSegment.length; k++) { 
 
      polyline.getPath().push(nextSegment[k]); 
 
      bounds.extend(nextSegment[k]); 
 
     } 
 
     } 
 
    } 
 
    // polyline.setMap(map); 
 
    } 
 
    // 
 
    /*********************************************************************\ 
 
    *                  * 
 
    * epolys.js           by Mike Williams * 
 
    * updated to API v3         by Larry Ross * 
 
    *                  * 
 
    * A Google Maps API Extension           * 
 
    *                  * 
 
    * Adds various Methods to google.maps.Polygon and google.maps.Polyline * 
 
    */ 
 
    // === A method which returns an array of GLatLngs of points a given interval along the path === 
 
google.maps.Polyline.prototype.GetPointsAtDistance = function(metres) { 
 
    var next = metres; 
 
    var points = []; 
 
    // some awkward special cases 
 
    if (metres <= 0) return points; 
 
    var dist = 0; 
 
    var olddist = 0; 
 
    for (var i = 1; 
 
    (i < this.getPath().getLength()); i++) { 
 
    olddist = dist; 
 
    dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1)); 
 
    while (dist > next) { 
 
     var p1 = this.getPath().getAt(i - 1); 
 
     var p2 = this.getPath().getAt(i); 
 
     var m = (next - olddist)/(dist - olddist); 
 
     points.push(new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m)); 
 
     next += metres; 
 
    } 
 
    } 
 
    return points; 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
} 
 
#floating-panel { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="info"></div> 
 
<div id="floating-panel"> 
 
    <b>Start: </b> 
 
    <!-- via via US-36 E and I-55 N --> 
 
    <input id="start" value="Kansas City, MO" /> 
 
    <br><b>End: </b> 
 
    <input id="end" value="Chicago IL" /> 
 
    <br> 
 
    <input id="btn" value="calculate" type="button" /> 
 
</div> 
 
<div id="map"></div> 
 
<div id="dirPanel"></div>