查询两个城市间的距离 博客分类: 个人杂谈
程序员文章站
2024-03-08 13:06:16
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <title>Google 地图 计算两个城市之间的距离,非直线距离</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> //计算两地之间的距离,非直线距离 var directionDisplay; var directionsService = new google.maps.DirectionsService(); var response; var directionsDisplay = new google.maps.DirectionsRenderer(); //不走高速 function noGaosu(){ var start = document.feng.sc.value; var end = document.feng.ec.value; var request = { avoidHighways: true, origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route( request, function(response, status){ if (status == google.maps.DirectionsStatus.OK){ directionsDisplay.setDirections(response); //m= response.routes[0].legs[0].distance.text; //alert(m); var distance = document.getElementById('nodistance'); distance.innerHTML = '不走高速的距离: '+response.routes[0].legs[0].distance.text; } } ); } //走高速 function gaosu(){ var start = document.feng.sc.value; var end = document.feng.ec.value; var request = { avoidHighways: false, origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route( request, function(response, status){ if (status == google.maps.DirectionsStatus.OK){ directionsDisplay.setDirections(response); //m= response.routes[0].legs[0].distance.text; //alert(m); var distance = document.getElementById('distance'); distance.innerHTML = '走高速的距离: '+response.routes[0].legs[0].distance.text; } } ); } </script> </head> <body onload="initialize()" onunload="GUnload()"> <form name="feng"> <div id="map_canvas" style="width: 600px; height: 400px"></div> <b>查询两个城市间的距离:</b><br /> 出发城市: <input type="text" id="sc" /><br /> 到达城市: <input type="text" id="ec" /><br /> <input type="button" value="高 速" id="bt" onClick="gaosu()"/> <input type="button" value="不走高速" id="bt" onClick="noGaosu()"/> <div id="distance"></div> <div id="nodistance"></div> </form> </body> </html>