利用Google Api计算行车距离代码代码,Asp.Net代码库,德仔网

代码语言

代码分类

【Asp.Net】利用Google Api计算行车距离代码

作者:zlkingdom / 发布于2015/1/27/ 628


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head id="Head1" runat="server">
	 <title>Distance Test Page</title>
	 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAALz6G_BfxPh4YjE75BlyUCRQ3OvTiC4UmnAMUNAqofMcGZTvb4xR06zGQDAWV1FCb5Cfb-bjiKzUdWw" type="text/javascript"></script>
	 <script src="JS/calculateDistance.js" type="text/javascript"></script>
	</head>
	<body onload="" onunload="GUnload()">
	 <form id="form1" runat="server">
	 <div>
	 <table width="100%">
	 <tr>
	 <td>
	 <asp:TextBox ID="addr1" runat="server" Text="2688 Shell Road, Richmond, BC" Width="588px"></asp:TextBox>
	 </td>
	 </tr>
	 <tr>
	 <td>
	 <asp:TextBox ID="addr2" runat="server" Text="2274 East 48th Ave, Vancouver, BC" Width="588px"></asp:TextBox>
	 </td>
	 </tr>
	 <tr>
	 <td>
	 <asp:Button ID="btn" runat="server" Text="Calculate" OnClientClick="calculateDistance(document.getElementById('addr1').value,document.getElementById('addr2').value,1,document.getElementById('result'));" />
	 </td>
	 </tr>
	 <tr>
	 <td>
	 <asp:TextBox ID="result" runat="server" Text=""></asp:TextBox>
	 </td>
	 </tr>
	 <tr>
	 <td>
	 <input id="btnShow" type="button" value="Show Map" onclick="initializeByCar('map_canvas','route',document.getElementById('addr1').value,document.getElementById('addr2').value,'result');" />
	 </td>
	 </tr>
	 <tr>
	 <td>
	 <div id="map_canvas" style="width: 70%; height: 500px; float:left; border: 1px solid black;"></div>
	 <div id="route" style="width: 25%; height:500px; float:right; border:1px solid black;"></div>
	 </td>
	 </tr>
	 </table>
	 </div>
	 </form>
	</body>
	</html>
	
	
	JS文件代码如下：
	var map;
	var directionsPanel;
	var directions;
	var resultCtrl;

	function initializeByCar(MapPanelID,directionsPanelID,addr1,addr2,resultCtrlID)
	{
	 if (GBrowserIsCompatible())
	 {
	 resultCtrl = document.getElementById(resultCtrlID);
	
	 map = new GMap2(document.getElementById(MapPanelID));
	 map.setCenter(new GLatLng(42.351505,-71.094455), 15);
	 directionsPanel = document.getElementById(directionsPanelID);
	 directions = new GDirections(map, directionsPanel);
	 //directions = new GDirections(null,null);
	
	 GEvent.addListener(directions,"load", set_distance);
	
	 directions.load("from: " + addr1 + " to: " + addr2 + " ");
	
	 }
	}

	function set_distance()
	{
	 if(directions.getDistance() != null && directions.getDistance() != "undefined")
	 {
	 resultCtrl.value = directions.getDistance().meters;
	 }
	}

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　行车距离　

同语言下

可能有用的

zlkingdom贡献的其它代码(4)