當我們知道住址時，也可以這樣套用
http://maps.google.com/maps?q=台北縣中和市莒光路
當我們知道經緯度後,只要將數據套到以下網址即可.
http://maps.google.com/maps?q=25.048346%2c121.516396
在參數q=後面,就可以加上經緯度了.
25.048346是Latitude緯度
%2c是空格
121.516396就是Longitude經度了.
而另一種做法就比這個複雜一點,要使用Google API來做,首先,要使用google API就必需要有google的帳號,沒帳號是無法申請的,當有google的帳號後,就可以到http://code.google.com/apis/maps/signup.html開始申請了.
最下方My web site URL就輸入各位的URL囉,如果輸入的與執行google map api的URL不同,那就無法執行了.所以這個URL務必輸入正確, 輸入正確的URL並將上方的CheckBox打勾後,就可以按Generate API Key了,如果已經登入GOOGLE的,就不會再跳登入畫面,之後就會跳到另一個畫面,上面就有Key及Example Code了,當有了這些,就可以開始自己寫Code了.
基本上,因為主要是Demo用的,所以設計介面很簡單.
上面就一個DropDownList,因為先前的範例資料的關係,先手動在ITEM上加上1跟2.
而下方的地圖,就跟申請API時的Example Code一樣. 原始碼如下 :
< %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
< !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 runat="server">
< title>GPS 位置地圖< /title>
< script src="http://maps.google.com/maps?file=api&v=2&key=輸入你的Key"
type="text/javascript">< /script>
< script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=輸入你的Key"
type="text/javascript">< /script>
< script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript">< /script>
< style type="text/css"> @import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
< /style>
< script type="text/javascript">
//< ![CDATA[
function load(x,y,LocationName) {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(x,y);
map.setCenter(point, 16);
map.addOverlay(new GMarker(point));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
var lsc = new google.maps.LocalSearch();
map.addControl(new google.maps.LocalSearch() , new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
map.openInfoWindowHtml (map.getCenter(), LocationName);
}
}
//]]>
< /script>
< /head>
< body id="MainBody" runat="server">
< form id="form1" runat="server">
< div>
< asp:DropDownList ID="ddl_Location" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddl_Location_SelectedIndexChanged"
Width="500px">
< asp:ListItem>1< /asp:ListItem>
< asp:ListItem Value="2">2< /asp:ListItem>
< /asp:DropDownList>< br />
< br />
< div id="map" style="width: 500px; height: 400px">
< /div>
< /div>
< /form>
< /body>
< /html>
只要將"輸入你的Key"的地方置換為你在Google MAP API申請到的Key即可.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.QueryString.HasKeys())
{
string longitude = Request.QueryString.Get("lon");
string latitude = Request.QueryString.Get("lat");
string LN = Request.QueryString.Get(Server.UrlDecode("LN"));
this.MainBody.Attributes.Add("onload", "load(" + longitude + "," + latitude + ",'" + LN + "')");
}
else
{
DataTable dt = GetLocation(ddl_Location.SelectedValue);
if (dt.Rows.Count > 0)
{
DataRow dr = dt.Rows[0];
this.MainBody.Attributes.Add("onload", "load(" + dr["Latitude"].ToString() + "," + dr["Longitude"].ToString() + ",'" + dr["updtime"].ToString() + "')");
}
}
}
}
protected void ddl_Location_SelectedIndexChanged(object sender, EventArgs e)
{
try
{
DataTable dt = GetLocation(ddl_Location.SelectedValue);
if (dt.Rows.Count > 0)
{
DataRow dr = dt.Rows[0];
this.MainBody.Attributes.Add("onload", "load(" + dr["Latitude"].ToString() + "," + dr["Longitude"].ToString() + ",'" + dr["updtime"].ToString() + "')");
}
}
catch (Exception ex)
{
Response.Write(ex.Message);
}
}
private DataTable GetLocation(string UID)
{
try
{
string strconn = "Data Source=localhost;Initial Catalog=GPSDB;User Id=GPSUser;Password=gpsuser;";
SqlConnection conn = new SqlConnection(strconn);
string strcmd = "select Latitude,Longitude,UpdTime from GPSDB..gpstrace where UID=@UID";
SqlCommand cmd = new SqlCommand(strcmd, conn);
cmd.Parameters.AddWithValue("@UID", UID);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt=new DataTable();
da.Fill(dt);
return dt;
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
如此一來,就大功告成了,但或許有些人會有些遺問,那麼MAP上,可以自訂一些東西,例如不給搜尋列,這都是可以做到的,可以參考Google Map API Examples,這裡就有很多詳細的說明.
感覺起來,GPS定位的想法部份,好像到此就沒了,但在這過程中也發現到,其實Google Map有出Mobile版的,而它的定位可不只是局限在GPS衛星訊號,而是可以用手機的訊號去定位,也就是說,他是透過手機與基地台之間的傳輸來計算出所在位置,這樣就可以不受到手機沒有GPS功能模組或收不到衛星訊號所限制,這個概念其實也不算新,記得幾年前的Run!PC雜誌上就有篇文章是在介紹這個的,採用的技術是Java.
不過不管如何,可以預見的是,這個的應用會愈來愈多元,誰說未來還要自己去用電腦下載圖資再更新到自己的GPS裝置上,裝置上的地圖永遠會是最新的,加上Street View,也不用去看那電腦畫出來的3D的道路圖了,或許3G或無線上網的普及,這些運用將會更廣泛.
