利用Google Api计算行车距离代码
2009-12-14 14:51
211 查看
<!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&v=2&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;
}
}
<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&v=2&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;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [小代码]计算两个经纬度之间的距离
- 利用两点的经纬度来计算这两点之间的距离
- 根据两点经纬度计算距离 附C#和PHP代码
- 利用代码计算原码，反码和补码
- 代码片段 - C#基于google api计算距离
- python学习[4]_利用numpy做一些距离的计算
- 利用VS的代码优化和openmp并行计算提高程序运行速度
- C++利用QueryPerformanceCounter计算代码运行时间
- 利用编辑距离(Edit Distance)计算两个字符串的相似度
- 利用JS实现的根据经纬度计算地球上两点之间的距离
- C#通过经纬度计算2个点之间距离的实现代码
- 随机计算TFIDF作为权重，然后利用余弦距离进行聚类，用的是简单k-means算法。
- android获取附近蓝牙设备并计算距离的实例代码
- python中利用time模块，计算一段代码运行的时间。
- 利用python对中文文本数据进行LDA训练、计算概率距离
- 利用编辑距离计算文本相似性
- 利用google map api计算两地距离
- Js利用console计算代码运行时间的方法示例
- 利用编辑距离(Edit Distance)计算两个字符串的相似度
- 利用JS实现的根据经纬度计算地球上两点之间的距离