在ASP.NET中使用Google Maps )

簡介

很多人都知道Google Map，其實，Google為我們自己開發應用程式提供了豐富的API，我們只要具備一些JavaScript的知識，就完全可以利用它們。但是，對於我來說，在ASP.NET頁面中使用JavaScript來調用Google Map的API有一定難度，尤其是利用伺服器端函數來動態畫出Google Map。例如，我想從SQL Server中讀取經緯度資訊，然後在Google Map中插入一個點。如果熟悉AJAX的話，很快就能得出答案。我們必須用JavaScript調用ASP.NET伺服器端函數，利用得到的資料來繪製Google Map。簡單吧？其實，對於我來說並非如此。因此，我決定開發一個使用者控制項來處理JavaScript代碼，這樣，我就能集中精力於伺服器端函數了。

 

特點

1.不需要JavaScript知識就能繪製Google Maps，只需在相應頁面加入自訂控制項即可。

2.使用AJAX調用來擷取伺服器端資料。

3.提供最優越的效能表現。

 

如何使用

在這裡，我並不想解釋我是如何建立該控制項的。我只要教你如何使用它。

 

系統需求

1.Visual Studio 2005或更高版本

2.Microsoft ASP.NET AJAX Extensions支援

3.Internet Explorer 7.0或Mozilla Firefox 2.x

 

你只需完成以下幾步：

1.建立一個ASP.NET AJAX-Enabled Website。

2.將原始碼中App_Code檔案夾、GoogleMapForASPNet.ascx、GoogleMapForASPNet.ascx.cs，GService.asmx複製到你的ASP.NET應用程式下。

3.保證你的網站支援AJAX技術。

4.開啟Default.aspx（或任何你想加入Google Map的位置），將該自訂控制項拖放至相應位置並編譯，這樣就實現了最簡單的帶有Google Map的ASP.NET網頁。

 

現在我們來為Google Map加一些標註點。在Page_Load()事件中加入一些代碼。

 

向Google Map控制項傳參

 

注意：使用時必須首先設定你的Google Maps API key（可以從Google免費擷取）。

以下是代碼：

if (!IsPostBack)
{
     GoogleMapForASPNet1.GoogleMapObject.APIKey = "<YourGoogleMapKey>";          //定義你的Google Maps API key

     GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2";          //選擇Google Maps API版本

     GoogleMapForASPNet1.GoogleMapObject.Width = "800px";
     GoogleMapForASPNet1.GoogleMapObject.Height = "600px";          //定義Google Map控制項的大小

     GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14;          //定義縮放層級，預設值為3

     GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("CenterPoint", 31.19, 120.37);     //定義地圖中心位置

     GoogleMapForASPNet1.GoogleMapObject.Points.Add(new GooglePoint("1", 31.19, 120.37));          //在指定經緯度定義新的地表徵圖注點

}

這樣，就能自訂地圖載入位置和標註點了。

 

自訂標註點表徵圖

 

該控制項支援自訂標註點表徵圖。首先，將表徵圖檔案複製到你的網站目錄下，接著，使用以下指派陳述式：

     GP.IconImage = "icons/pushpin-blue.png";

還可以為標註點添加註釋，當使用者單擊標註點時，能看到注釋內容。代碼：

     GP.InfoHTML = "這是一個標註點";

 

至此，已經介紹了使用Google Maps Control的基本內容。接下來，我們來看一下它的進階功能。例如，當使用者進行某些操作時移動標註點。

 

建立互動式地圖

 

該控制項支援使用者建立互動式地圖。下面這個例子是，當使用者單擊按鈕時，移動標註點。以下是使用方法：

 

1.插入一個Button控制項，在它的Click事件中加入以下代碼：

     protected void Button1_Click(object sender, EventArgs e)
     {
           GoogleMapForASPNet1.GoogleMapObject.Points["1"].Latitude += 0.003;
           GoogleMapForASPNet1.GoogleMapObject.Points["1"].Longitude += 0.003;
     }

     可以自主控制經緯度的增量。

2.運行該頁面，你將發現整個頁面都會被重新整理或回傳。為了避免這種現象，我們只需要把這個Button控制項加入UpdatePanel控制項中。

3.重新運行該頁面，可看到該頁面已經一切正常了。

 

自動更新和GPS導航

 

我們可以使用AJAX架構中的Timer控制項來實現這一功能。在Timer_Tick()事件中，可以定義圖說文字點新的經度和緯度。這樣，在指定的時間間隔後，地圖上所有的標註點都會自動更新。你也可以串連到GPS裝置，構成一個GPS導航系統。

 

使用Google Maps Control繪製折線

 

1.首先，添加該折線的各個端點。代碼如下：

     GooglePoint GP1 = new GooglePoint();
     GP1.ID = "GP1";
     GP1.Latitude = 31.19;               //定義圖說文字點緯度
     GP1.Longitude = 120.37;          //定義圖說文字點緯度
     GP1.InfoHTML = "這是標註點1";     //可選注釋項
     GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP1);          //在地圖上添加這個點

     GooglePoint GP2 = new GooglePoint();
     GP2.ID = "GP2";
     GP2.Latitude = 31.19001;
     GP2.Longitude = 120.37001;
     GP2.InfoHTML = "這是標註點2";
     GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP2);

     GooglePoint GP3 = new GooglePoint();
     GP3.ID = "GP3";
     GP3.Latitude = 31.19003;
     GP3.Longitude = 120.36998;
     GP3.InfoHTML = "這是標註點3";
     GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP3);

2.利用這些點繪製折線

     GooglePolyline PL1 = new GooglePolyline();     //定義折線
     PL1.ID = "PL1";
     PL1.ColorCode = "#0000FF";               //定義折線顏色
     PL1.Width = 5;                    //定義折線寬度

     PL1.Points.Add(GP1);          //加入這些點（繪製折線）
     PL1.Points.Add(GP2);
     PL1.Points.Add(GP3);

3.將折線加入Google Maps Control中

     GoogleMapForASPNet1.GoogleMapObject.Polylines.Add(PL1);

 

 

使用Google Maps Control繪製多邊形

 

1.按照上面的方法加入多邊形各頂點。這裡不再贅述。

2.使用這些點建立一個多邊形。代碼如下：

     GooglePolygon PG1 = new GooglePolygon();          //定義多邊形
     PG1.ID = "PG1";
     PG1.FillColor = "#0000FF";               //定義多邊形各條邊的顏色
     PG1.FillOpacity = 0.4;

     PG1.Points.Add(GP1);               //將上面建立的各點加入多邊形（作為頂點）
     PG1.Points.Add(GP2);
     PG1.Points.Add(GP3);
     ……………………………………

     PG1.Points.Add(GPn);               //第n個頂點

3.將多邊形加入Google Maps Control中

     GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);

 

今天先寫到這裡，改天繼續。

 

應各位網友請求，附上原始碼：點擊下載