如何將經緯度利用Google Map API顯示C# VS2005 Sample Code

時間 2019-12-17

標籤如何經緯度利用 google map api 顯示 c# vs2005 sample code 欄目 Google 简体版

原文原文鏈接

原文如何將經緯度利用Google Map API顯示C# VS2005 Sample Codejavascript

日前寫了一篇如何用GPS抓取目前所在,並回傳至資料庫儲存,這篇將會利用這些回報的資料,將它顯示在地圖上,這個作法有兩種,最簡單的就是直接傳值到Google Maps上. css

舉例來講,當咱們知道經緯度後,只要將數據套到如下網址便可. html

http://maps.google.com/maps?q=25.048346%2c121.516396 java

在參數q=後面,就能夠加上經緯度了. git

25.048346是Latitude緯度 web

%2c是空格 api

121.516396就是Longitude經度了. post

範例畫面: this

而另外一種作法就比這個複雜一點,要使用Google API來作,首先,要使用google API就必須要有google的賬號,沒賬號是沒法申請的,當有google的賬號後,就能夠到http: //code.google.com/apis/maps/signup.html開始申請了. google

最下方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&amp;v=2&amp;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或無線上網的普及,這些運用將會更普遍.

參考資料:

Google Map API Examples

Google Map Mobile

原始碼: GPSMap.zip