从Origin绘制Route X公里

时间:2012-01-03 03:03:23

标签: google-maps-api-3

跑步/步行距离显示。

用户输入位置和距离。

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

我可以在用户设置的距离处设置原点周围的四个基点(N,S,E,W),并将路线绘制到这些点,这样B点距离A点100KM,但是映射例如,沿路的路线是145公里。

是否可以在道路上显示正好100公里的路线?

已编辑以更新进度。

1 个答案:

答案 0 :(得分:0)

终于解决了这个问题并且认为我会分享。

因此,用户提供位置和距离;我们会说100Km。

代码找到原点的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

找到的两个很棒的函数集合