map24根据两个地方的经纬度来获取路径

 map24手册地址是： http://devnet.map24.com/api/ajax/2.0.1425/doc/index.html
入门地址是：http://devnet.map24.com/manuals/doku.php?id=ajax:2.0:tutorials:overview

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
   < meta  http-equiv ="content-type"  content ="text/html; charset=UTF-8"   />
   < title > Route Calculation with Selection of Geocoded Start & Destination </ title >
   < script  type ="text/javascript"  language ="javascript"  src ="http://api.maptp.map24.com/ajax?appkey=FJXc5d99b6fa10073be9b1fd334c7d11X35" ></ script >
   < script  type ="text/javascript"  language ="javascript" > ...
      
  //Declare global variables  
  var geocoder = null;
  var router = null;
  var routePoints = [];
  var routeID = null;
  var startPointAlternatives = new Array();
  var destinationPointAlternatives = new Array();
  var startLoc = null;
  var destLoc = null;
  
  function goMap24() ...{
    Map24.loadApi( ["core_api", "wrapper_api"] , map24ApiLoaded );
  }
  
  function map24ApiLoaded()...{
    Map24.MapApplication.init( ...{ NodeName: "maparea" } ); 
    
    //Hide HTML elements that should not be shown initially
    //document.getElementById("geocodingResults").style.visibility = "hidden"; 
    //document.getElementById("button_calculate_route").style.visibility = "hidden";
  }
 
  
  

  
  //This function is called after the user has pressed the "Show Route" button.
  //It accesses the selected start and destination from the list boxes and 
  //initiates the route calculation.
  function setRoutePoints()...{
    //Get the index of the selected start and destination
   // var start = document.forms["start"]["geocodingresultsStart"].selectedIndex;
    //var dest = document.forms["dest"]["geocodingresultsDestination"].selectedIndex;
          
    //Store the selected route points in the routePoints array
    routePoints["start"] = new Map24.Location(...{
                    Longitude: document.getElementById("longtitude").value,
                    Latitude: document.getElementById("latitude").value,
                    Description: "Bob's ToolTip:This is a plain tooltip for the location which is visible on the interactive map.",
                    LogoURL: "http://img.map24.com/map24/3DSignet/signet3d22x20.gif"
                });     
    routePoints["destination"] =new Map24.Location(...{
                    Longitude: document.getElementById("longtitude2").value,
                    Latitude: document.getElementById("latitude2").value,
                    Description: "Bob's ToolTip:This is a plain tooltip for the location which is visible on the interactive map.",
                    LogoURL: "http://img.map24.com/map24/3DSignet/signet3d22x20.gif"
                });     
    
    //Start route calculation
    calculateRoute();
 
    document.getElementById("button_show_list").disabled = true;
  } 
 
  //Calculate the route.
  function calculateRoute() ...{
      
    //Create a routing service stub
    if( router == null ) router = new Map24.RoutingServiceStub();
    
      //Calculate the route. 
    router.calculateRoute(...{
      Start: routePoints["start"],
      Destination: routePoints["destination"],
      CallbackFunction: displayRoute,
      //The ShowRoute parameter is set to false, the route is not shown automatically.
      //This is necessary if you want to change the default color used for showing the route.
      //To show the route call the Map24.RoutingServiceStub.showRoute() function in the callback function.
      ShowRoute: false
    });
     
     document.getElementById("print").disabled = true;
     //document.getElementById("button_calculate_route").disabled = true;   
  }
  
  //Callback function used to access the calculated route of type Map24.WebServices.Route.
  //This function shows the route on the map, adds locations at the position of the start and 
  //destination points to the map, prints a detailed route description, and provides 
  //a button next to each entry in the route description that allows to center on a route segment.
  function displayRoute( route )...{
      
    //Remember the routeId. It is used e.g. to hide the route.
    routeID = route.RouteID;
      
    //Show the route with blue color and transparency.
    //The transparency can be set to a value between 0 (completely transparent) and 255 (opaque).
    router.showRoute( ...{
      RouteId: routeID,
      Color: ['#00F', 150]
    });
    document.getElementById('routeDescription').innerHTML = div_content;
    document.getElementById("button_hide_route").disabled = false;
    document.getElementById("button_remove_route").disabled = false;
    document.getElementById("print").disabled = false;
    
  }
  
  //This function is called after the user has selected a route segment to center on.
  function centerOnSegment (centerLon, centerLat)...{
      //Center on the given variable
      Map24.MapApplication.center( ...{ Coordinate:new Map24.Coordinate(centerLon, centerLat), MinimumWidth: 3034 } );
  }
  
  function showRoute() ...{
    //Show the route. 
    router.showRoute( ...{RouteId: routeID} );
    startLoc.show();
    destLoc.show();
    
    document.getElementById("button_show_route").disabled = true;
    document.getElementById("button_hide_route").disabled = false;
    document.getElementById("button_remove_route").disabled = false;  
  }
  
  function hideRoute() ...{
    //Hide the route.
    router.hideRoute( ...{RouteId: routeID} );
    startLoc.hide();
    destLoc.hide();
    
    document.getElementById("button_show_route").disabled = false;
    document.getElementById("button_hide_route").disabled = true;
    document.getElementById("button_remove_route").disabled = true; 
  }
  
  //Removes a route. After the route is removed, a new route can be calculated.
  function removeRoute(routeID) ...{
    //Remove route
      router.removeRoute(...{RouteId: routeID});
      //Remove locations that show start and destination of the route
    startLoc.remove();
    destLoc.remove();
 
    //Delete route description  
    document.getElementById("routeDescription").innerHTML = "";
    
    //Reset buttons
    document.getElementById("button_show_route").disabled = true;
    document.getElementById("button_hide_route").disabled = true;
    document.getElementById("button_remove_route").disabled = true; 
   // document.getElementById("button_calculate_route").style.visibility = "visible";
   // document.getElementById("button_calculate_route").disabled = false;
    document.getElementById("button_show_list").style.visibility = "visible";
    document.getElementById("button_show_list").disabled = false;
    document.getElementById("print").disabled = true; 
  }
  
  //Print Description function. 
  //The function opens a print preview window of the route description and one can choose the printer.
  function printRouteDescription()...{
        var printContent = document.getElementById("routeDescription");
        var windowPrint = window.open('','','left=0,top=0,width=0,height=0,toolbar=0,scrollbars=0,status=0');
        windowPrint.document.write(printContent.innerHTML);
        windowPrint.document.close();
        windowPrint.focus();
        windowPrint.print();
        windowPrint.close();
    }
  
  //Helper function for accessing the div specified in the id parameter.
  //The function checks first if the div contains content.
  function $v( id ) ...{ 
    return (document.getElementById( id ).value != "undefined") ?  
        document.getElementById( id ).value : ""; 
  }
 
   </ script >
   </ head >
 
< body  onload ="goMap24();" >
   < div  id ="maparea"  style ="width:700px;height:500px;background-color:#E0E0E0;" ></ div >
   < br  />
   < div  style ="width:700px;border-width:0px;border-style:solid" >
     < input  type ="button"  id ="button_show_route"  value ="Show Route"  onclick ="showRoute( routeID )"  disabled ="disabled"   />
     < input  type ="button"  id ="button_hide_route"  value ="Hide Route"  onclick ="hideRoute( routeID )"  disabled ="disabled"   />
     < input  type ="button"  id ="button_remove_route"  value ="Remove Route"  onclick ="removeRoute( routeID )"  disabled ="disabled"   />
   < input  type ="button"  id ="print"  value ="Print Description"  onClick ="printRouteDescription()"  disabled ="disabled"   />
   < input  type ="button"  id ="reload"  value ="Refresh"  onClick ="history.go(0)"   />
   < br  />
   < br  />  
     < div  style ="width:410px;border-width:0px;border-style:solid" >
     < table  id ="selection"  class ="selection"  cellpadding ="1"  cellspacing ="1" >
    
       < tbody >
       < tr >
         < td  width ="276px" > Start: </ td >
         < td  width ="424px" >< input  type ='text'  id ='longtitude'  style ="width:350px;"  value ="305.9064025878906"   /></ td >
         < td  width ="276px" > Destination: </ td >
         < td  width ="424px" >< input  type ='text'  id ='latitude'  style ="width:350px;"   value ="2797.95849609375"    /></ td >
        
       </ tr >
        < tr >
         < td  width ="276px" > Start2: </ td >
         < td  width ="424px" >< input  type ='text'  id ='longtitude2'  style ="width:350px;"  value ='305.9064025878906'  /></ td >
         < td  width ="276px" > Destination2: </ td >
         < td  width ="424px" >< input  type ='text'  id ='latitude2'  style ="width:350px;"  value ='2888.95849609375'  /></ td >
        
       </ tr >
       < tr >
         < td >< input  type ="button"  id ="button_show_list"  value ="Route"  onclick ="setRoutePoints()"   /></ td >
       </ tr >
       </ tbody >
     </ table >
     </ div >
   < br  />
   < div  id ="routeID" ></ div >
    < div  id ="result"  style ="text-align:left;width:700px;" >   </ div >< br  />
    < div  id ="routeDescription"  style ="text-align:left;width:700px;" ></ div >
</ body >
</ html >