第四章 RWD元件設計第四章 RWD元件設計\4-11 Map 地圖

4-11 Map 地圖

Step1>        我們先在Customers資料表裡添加一個欄位,做為下面的地圖欄位。

Alter Table Customers add Map NVARCHAR(200) NULL

Step2>        下面的地圖我們使用GoogleMap來示範。設計前需要先申請一組金鑰。如在上面章節申請過金鑰,此步驟可省略。

(2-1) 首先先訪問此網址,並登入Google帳戶。

https://developers.google.com/maps/documentation/geocoding/get-api-key?hl=zh-tw

(2-2) 點選右上角的【取得金鑰】按鈕

(2-3) 選擇或是建立一個新的Project

(2-4) 完成後按下右下角的【ENABLE API】按鈕,會立即取得一組金鑰。

 

Step3>        開啟 JQWebClient下的Web.config 加入以下兩行定義並存檔。

<add key="MAP_TYPE" value="google" />

<add key="MAP_KEY" value="google帳戶取得金鑰(如上)" />

Step4>        RWDScriptManager元件上,設置UseMap屬性True

Step5>        dfMaster這個DataForm元件,加入一個欄位,Field屬性選擇Map,將Editor修改為Map

Step6>        接著,點開EditorOptions中的屬性編輯器,設定ValueType=current(自動定位目前所在的位置)

Step7>        找到dgMaster這個DataGrid元件,加入一個欄位,Field屬性選擇Map,將Format設置為map,current

Step8>        設置完成後保存,下圖為實際運行的效果:

DataForm編輯:

DataGrid顯示:

Step9>        若是不想使用自動定位,而是要在DataForm上編輯值,並在DataGrid上顯示欄位值所在的地圖,可以將DataForm的欄位型態改回textbox,若欄位值為地址,可以將DataGridFormat屬性改為:map,address

執行結果:

Step10>     若欄位值為經緯度,可以將DataGridFormat屬性改為:map,latlng


 

Top of Page