如何使用两点经纬度绘制行车路线

时间:2013-12-27 06:57:41

标签: javascript php bing-maps

我需要知道如何在这个位置使用纬度和经度绘制两个位置(图钉)之间的行车路线。我知道如何使用位置名称绘制两个位置行驶路线。需要使用纬度和经度。可能吗 ? (在bing map中)

enter image description here

1 个答案:

答案 0 :(得分:2)

是的,这是可能的。请尝试以下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script type="text/javascript">

         var map = null;
         var directionsManager = null;

         function GetMap() {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Map Key"});
            Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });
         }



         function directionsModuleLoaded()
         {
            // Initialize the DirectionsManager
            directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

            // Create start and end waypoints
            var startWaypoint = new Microsoft.Maps.Directions.Waypoint({location:new Microsoft.Maps.Location(33.993065, -117.918015)}); 
            var endWaypoint = new Microsoft.Maps.Directions.Waypoint({location:new Microsoft.Maps.Location(42.28695, -71.59419)} );

            directionsManager.addWaypoint(startWaypoint);
            directionsManager.addWaypoint(endWaypoint);

            // Set request options
            directionsManager.setRequestOptions({ avoidTraffic: true, maxRoutes: 1 });

            // Set the render options
            directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv'), displayWalkingWarning: false, walkingPolylineOptions:{strokeColor: new Microsoft.Maps.Color(200, 0, 255, 0)} });

            // Specify a handler for when an error occurs
            Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', displayError);

            // Calculate directions, which displays a route on the map
            directionsManager.calculateDirections();
         } 

         function displayError(e) {
            // Display the error message
            alert(e.message);
         }


      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>       
      <div id='itineraryDiv' style="position:relative; width:400px;"></div>
   </body>
</html>