how to draw driving route path using two point latitude and longitude

谁说我不能喝 提交于 2019-12-06 11:51:34

Yeah, it's possible. Try the below code

<!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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!