google map api查询线路(转帖)

本文介绍了一个基于Google Maps API的应用实例,通过简单的网页界面实现从任意起点到任意终点的驾车路线查询。用户只需输入起始地和目的地,即可显示详细的路径及地图。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<%--
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>--%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Google maps API 查询路线,任何地点到任何地点</title>
 <script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAQ0pgyic4ROE9rr4PWF1qBRDvuDKJLLEMBt0175lffxKd2WRRBRIVZEREjaUWbrLdbvDieibc2PHlg&hl=zh-CN" type="text/javascript"></script>


</head>
<body onload="initialize();" onunload="GUnload();">
<div style="width:1000px;margin:0 auto;">
<div style="height:50px;">
<p><label for="from_tbx">从:</label><input type="text" id="from_tbx" value="" />
<label for="to_tbx">到:</label><input type="text"  id="to_tbx" value="" />
<input type="button" id="luxian" onclick="javascript:luxian();" value="驾车路线查询" /></p>
</div>
<div id="map_info">
<div id="direction" style="width:350px;height:500px;float:left;overflow:auto;"></div>
<div id="googlemap" style="width:600px;height:500px;margin-right:8px;float:right;"></div>
</div>
</div>
<script type="text/javascript">
var map;
var gdir;
var geocoder = null;
var addressMarker;
var centerRoute = "31.238508612629097,121.46677494049072";
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("googlemap"));
var center = new GLatLng(31.238508612629097,121.46677494049072);
map.setCenter(center,13);
gdir = new GDirections(map,document.getElementById('direction'));
GEvent.addListener(gdir,"error",handleErrors);
geocoder = new GClientGeocoder();
//定义一些控件
var customUI = map.getDefaultUI();
customUI.maptypes.hybrid = false;
customUI.maptypes.physical = false;
map.setUI(customUI);
map.disableDoubleClickZoom();
//因为后面要重新定义双击事件,这里移除双击放大事件
var marker = new GMarker(center);

map.addOverlay(marker);

}
}

//乘车路线
function luxian()
{
var fromAddress = document.getElementById('from_tbx');
var toAddress = document.getElementById('to_tbx');
var address = fromAddress.value;

//getLocations方法解析地址,返回json
geocoder.getLocations(address,
function(json)
{
if (!json)
{
alert("解析/""+address+"/"错误");
}
else
{
//地址解析为坐标可能有多个结果,这里只取查询结果的第一个json.Placemark[0]
//有兴趣扩展可以通过遍历json输出所有查询结果,让使用者选择最符合的结果。
var addressRoute ="from:"+address+"@"+json.Placemark[0].Point.coordinates[1]
+","+json.Placemark[0].Point.coordinates[0]
+" to:"+toAddress.value+"@";
//设置路线起始点坐标
gdir.load(addressRoute,{travelMode:G_TRAVEL_MODE_DRIVING});
}
});


}
function handleErrors(){
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect./nError code: " +gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known./n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input./n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("The given key is either invalid or does not match the domain for which it was given. /n Error code: "+ gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("A directions request could not be successfully parsed./n Error code: " + gdir.getStatus().code);

else alert("An unknown error occurred.");

}


</script>
</body>
</html>

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值