Google maps api 3 绘制距离原点X公里的路线

跑步/步行距离显示

用户输入位置和距离

我可以覆盖一个半径为用户输入距离的圆，以用户的位置为中心点

我可以在用户设置的距离上围绕原点设置四个基点（N、S、E、W），并绘制到这些点的路线，这样点B距离点A 100公里，但映射的路线是，比如说，沿着道路145公里

是否可以显示沿道路100公里的路线

---

编辑以更新进度。

最终解决了这个问题，我想与大家分享

因此，用户提供位置和距离；我们说100公里

该代码查找原点100公里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)


}

directionsService.route（{
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
}，函数（结果）{
渲染方向（结果）；
}); 
//不要使用google api DirectionsRender（）绘制路线。
//相反-result保存一组构成整个路线的lat/long点。假设是拉特朗[123]
//迭代该数组，获取从点a到latlong[0]的距离，从点a到latlong[1]的距离，等等。。。
//当该距离>=用户提供的距离时，停止并绘制从点a到阵列latlong中latlong点的多段线[78]
函数ComputeTotalInstance（结果）{
var合计=0；
var myroute=result.routes[0]；
如果（我的路线）
{
//从起点创建板条
var objGeo=new LatLon（Geo.parseDMS（myroute.overview_path[0].Qa），Geo.parseDMS（myroute.overview_path[0].Ra））；
//调用获取从起点到阵列中其他点的距离
//每个后续点的距离应更长
var arrPointsToDraw=[]；
对于（var i=1；i parseInt（distance.value））
{
arrPointsToDraw.pop（）；//删除数组的最后一个元素
打破
}
}
//此时，arrPointsToDraw[]包含最接近我们距离的横向/纵向点
//不经过
lines[lines.length]=新的google.maps.Polyline({
路径：arrPointsToDraw，
strokeColor:“#1589FF”，
笔划不透明度：1.0，
冲程重量：3
});
行[lines.length-1].setMap（map）；
}//如果结束（myRoute）
}

这段代码使用了两个奇妙的函数集合