從原點畫X公里路線X

Question

跑步/步行距離顯示。

用戶輸入位置和距離。

我可以用用戶輸入的距離半徑覆蓋一個圓，用戶的位置爲中心點。

我可以在距離用戶設置的距離上繪製四個基點（N，S，E，W），並將路線繪製到這些點上，使得B點距離A點100KM，但是例如，沿着道路行駛145公里的路線。

沿着100公里的道路可以顯示路線嗎？

編輯更新進度。

Answer 1

終於解決了這個問題，並認爲我會分享。

因此，用戶提供位置和距離;我們會說100公里。

該代碼找到原點的100Km N，S，E，W的基數點，然後解決到每個點的路線。如果求解路線成功，則結果包含從原點到目的地的一系列點。

 directionsService.route({ 
      origin: start, 
      destination: end, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }, function(result) { 
      renderDirections(result); 
      }); 

    //don't use the google api DirectionsRender() to draw the route. 
    //instead - result holds an array of lat/long points that make up the entire route. Lets say it's latlong[123] 
    //iterate through that array, getting a distance from point A to latlong[0], A to latlong[1], etc... 
    //when that distance is >= user supplied distance, STOP, and draw a polyline from point A through the latlong points in the array latlong[78] 

function computeTotalDistance(result) { 
    var total = 0; 
    var myroute = result.routes[0]; 
if(myroute) 
{ 
//create a LatLon from the Starting point 
    var objGeo = new LatLon(Geo.parseDMS(myroute.overview_path[0].Qa), Geo.parseDMS(myroute.overview_path[0].Ra)); 

    //call get distance from the starting point to each other point in the array 
    //each subsequent point should be a longer distance 
    var arrPointsToDraw =[]; 
    for(var i = 1; i<=myroute.overview_path.length-1;i++) 
    { 
     try 
     { 
      var objGeo2 = new LatLon(Geo.parseDMS(myroute.overview_path[i].Qa), Geo.parseDMS(myroute.overview_path[i].Ra)); 
     } 
     catch(err) 
     { 
      alert(err.description); 
     } 
     //here, total = kilometers 
     total = objGeo.distanceTo(objGeo2,3); 

     //add coordinates to our array of points that we are going to draw 
     arrPointsToDraw.push(new google.maps.LatLng(objGeo2._lat, objGeo2._lon)); 

      if(parseInt(total) > parseInt(distance.value)) 
      { 
       arrPointsToDraw.pop();//remove the last element of the array 
       break; 
      } 
    } 

     //at this point, arrPointsToDraw[] contains the lat/long points that are closest to our distance 
     //without going over 
     lines[lines.length] = new google.maps.Polyline({ 
         path: arrPointsToDraw, 
         strokeColor: '#1589FF', 
         strokeOpacity: 1.0, 
         strokeWeight: 3 
        }); 

     lines[lines.length-1].setMap(map); 
    }//end if(myRoute) 


} 

該代碼使用的函數的兩個夢幻般的集合發現here