[原] SharePoint 2010 WebPart與Google地圖系列 一：建立顯示地圖的WebPart

dosboy發表於2013-10-12
WebGo地圖

摘要: 作為資訊化先驅的產品SharePoint 2010竟然對GIS相關技術支援如此有限，試問現在哪個企業沒有大量的專案需要結合Google地圖來進行開發，單純地從Google Javascript API來說，線上地圖主要還是基於Javascript的前端開發技術，毫無疑問這就像"火腿腸"與"生豬"關係一樣前後不搭，這本身與.net Framework為後臺的SharePoint 2010毫無交集，但是很多開發者不知道如何把這2者結合起來進行"和諧利用"，因此筆者寫下Google Map與SharePoint 如何結合開發系列篇章，讀者可以用SharePoint這堆豬肉去做一個帶Google標記的火腿腸了:

所有原始碼將在本系列最後一章給出，讀者可以自行下載(本文由Dosboy 在[cnblogs]原創請轉載時註明出處)

1、 如何在SharePoint 2010中開發帶連線互動功能(向其它WEBPART提供座標值)的Web 部件；

2、 如何開發並在WebPart部件中插入Javascript程式碼，用於Google地圖功能開發；

本文不需要讀者有高深的開發基礎，能看得懂的基本的C#、Javascript程式碼，理解SharePoint的基本功能就行。

建立WebPart並加入地圖顯示程式碼的詳細步驟:

1． 在Visual Studio 2010 中，新建專案，在C#專案模板中選擇"SharePoint"下的，建立一個SharePoint 型別的可視Web部件

 

然後把這個專案名稱命名為: MapLocationPick ，

下面系統會跳出一個對話方塊，要求輸入SharePoint網站的URL，請照實輸入，一路確認就OK了。

Debug: 進行第1步要求系統已經安裝SharePoint 2010 Server，並且在伺服器上已經安裝了Visual Studio 2010、SharePoint SDK這2個元件。

2．下面自定義專案屬性。

先改系統自動命名的檔案，系統會自動生成一大堆檔案，在IDE檔案列表中，把所有的檔名改成如下的名稱，以方便記憶：

然後在點開MapPickWebPart.webpart 這個檔案，在這個以.webpart結尾的檔案裡，定義了這個Web部件在SharePoint顯示的名稱:

  1. <properties>
  2.        <property name="Title" type="string">Dosboy座標選取</property>
  3.        <property name="Description" type="string">Dosboy座標選取</property>
  4. </properties>

我們把properties節下面的屬性改成上面程式碼所示的內容

 

3．申請Google API KEY ，寫程式碼之前為了能夠使用Google地圖我們需要申請一個KEY，讀者可以自行參考如下連結來寫Google的程式碼和申請KEY

https://developers.google.com/maps/documentation/javascript/tutorial

 

4．寫HTML標記程式碼。 雙擊MapPickWebPartUserControl.ascx 檔案，這個ASCX檔案其實就是一個"使用者控制元件"，這個控制元件是被程式碼自動載入到WEB部件當中的。

如下圖，點選"源"，用於修改HTML程式碼，插入如下的標記

  1. <p>
  2.     座標：<input
  3.         id="dosboyTxtPoint" type="text" style="background-color: #DDDDDD" />搜尋地址：<input id="dosboyTxtSearch"
  4.         style="width: 184px" type="text"/>
  5. <input id="dosboyBtnSearchMap" type="button" value="搜圖" onclick="return Button1_onclick()" /></p>

以上的標記表示了一個用以顯示座標值的文框，並且背景是灰的，一個用來輸入地址以定位搜尋地圖顯示的文字框，和一個按鈕。

然後在後面再插入如下的標記：

  1. <div id="allmap" style="width:100%;height:350px"></div>

 

這個標記表示一個DIV層，ID為allmap，寬度是100%，高度是350px ，這個DIV標記就是GOOGLE地圖的容器，用來顯示GOOGLE地圖的地方。

 

5．寫Javascript程式碼。同樣在這個ASCX控制元件的HTML頁"源"中，我們在DIV標記後面，插入如下的Javascript程式碼，用以把這個DIV標記變成地圖：

  1. <script type="text/javascript">
  2.     //下面方法用以把函式載入到SP頁面載入完畢後執行
  3.     _spBodyOnLoadFunctionNames.push('loadGmapScript');
  4.     //定義GOOGLE地圖的變數
  5.     var map;
  6.  
  7.     //對GOOGLE地圖進行引用，並在引用成功後載入dosboy_loadMap函式
  8.     function loadGmapScript() {
  9.         var script = document.createElement("script");
  10.         script.type = "text/javascript";
  11.         script.src = "http://maps.googleapis.com/maps/api/js?key=這裡填寫第3步申請的KEY值&sensor=false&callback=dosboy_loadMap";
  12.         document.body.appendChild(script);
  13.     }
  14.  
  15.     function dosboy_loadMap() {
  16.        //定義地圖的屬性:中心點（座標），縮放級別（11），地圖型別（路網圖）
  17.         var mapOptions = {
  18.             center: new google.maps.LatLng(32.028, 119.814),
  19.             zoom: 11,
  20.             mapTypeId: google.maps.MapTypeId.ROADMAP
  21.         };
  22.         //把allmap為ID的DIV標記定義為上面屬性的地圖，並把物件賦給map
  23.         map = new google.maps.Map(document.getElementById("allmap"), mapOptions);
  24.  
  25.  
  26.     }
  27. }
  28. </script>

6．部署並預覽結果，在專案檔案右擊，選擇"部署"，然後開啟SharePoint頁面，如下圖新增一個名為Dosboy座標選取的WEB部件到當前頁面

 

經過第一章，這個地圖可以完美的顯示出來，下面我們將要增加他的功能，首先要完成在搜尋地址一欄輸入地址時並按"搜圖"時，我們地圖可以定位到這個地方，其次滑鼠單擊地圖時，可以在地圖上標記出來，並且在座標一欄中顯示出座標值來，請繼續關注哦！

相關文章