Delphi APP 開發入門（五）GPS 定位功能

分享：

Share on facebookShare on twitterShare on google_plusone_share

 

閲讀次數：3518 發表時間：2014/06/03

tags: 行動開發 教學 App Delphi XE6 Android iOS

Delphi APP 開發入門（四）簡易手電筒 << 前情

在行動裝置的應用上，大多會離不開GPS定位以及地圖功能。今天就來教大家製作一個簡易的定位結合地圖的APP－「我現在在那裡」，讀者們可以利用這個超級簡單的APP延伸進階成其他的應用。

一、開啟一個新的Mobile專案

delphi XE android 菜单 delphi app_iOS


delphi XE android 菜单 delphi app_iOS_02


二、在畫面上放置一個ListBox元件，屬性設定如下

Align : Top

GroupingKind : Grouped

StyleLookup: ListboxStyle

delphi XE android 菜单 delphi app_iOS_03

       

delphi XE android 菜单 delphi app_iOS_04


delphi XE android 菜单 delphi app_iOS_05

    

delphi XE android 菜单 delphi app_iOS_06


三、接著我們要在上面增加一個程式的抬頭，在ListBox按右鍵，Add Item -> TListBoxHeader。接著在ListBoxHeader上新增一個Label，把屬性設定如下

Align : Client

StyleLookup: toollabel

Text: 我現在在那裡

TextSettings->HorzAlign: Center

delphi XE android 菜单 delphi app_iOS_07


delphi XE android 菜单 delphi app_Text_08


delphi XE android 菜单 delphi app_iOS_09


delphi XE android 菜单 delphi app_Text_10

    

delphi XE android 菜单 delphi app_Text_11


delphi XE android 菜单 delphi app_Delphi_12


四、接著在畫面上設定定位功能的開關跟顯示經緯度，一樣在Listbox上右鍵Add Item -> TListBoxItem建立三次。修改每個ListBoxItem的Text屬性為開啟定位功能、經度、緯度。 

delphi XE android 菜单 delphi app_Delphi_13

 

delphi XE android 菜单 delphi app_Text_14

 

delphi XE android 菜单 delphi app_iOS_15


五、在上面放上TSwitch跟Label元件如下。

delphi XE android 菜单 delphi app_Text_16


六、接著要顯示Google 地圖，在畫面上放置TWebBrowser元件，把Align設為Client。

delphi XE android 菜单 delphi app_Text_17


delphi XE android 菜单 delphi app_Delphi_18


七、最後在畫面上放上LocationSensor元件即完成畫面佈置。

delphi XE android 菜单 delphi app_Text_19


八、正式開始寫程式囉！需要寫程式的地方只有二個，一個是打開LocationSensor定位，另一個是顯示在地圖上。在Switch的OnSwitch事件中，輸入以下程式

delphi XE android 菜单 delphi app_Text_20


procedure TForm1.Switch1Switch(Sender: TObject);
begin
  LocationSensor1.Active := Switch1.IsChecked;
end;

九、接著在LocationSensor的OnLocationChanged事件輸入以下程式

delphi XE android 菜单 delphi app_iOS_21


procedure TForm1.LocationSensor1LocationChanged(Sender: TObject;
  const OldLocation, NewLocation: TLocationCoord2D);
const
  sGoogleMapURL : String =  'https://maps.google.com/maps?q=%s,%s';
begin
  label2.Text := NewLocation.Latitude.ToString;
  label3.Text := NewLocation.Longitude.ToString;
  WebBrowser1.Navigate(Format(sGoogleMapURL,
                              [NewLocation.Latitude.ToString,
                               NewLocation.Longitude.ToString]));
end;

十、接著可以執行了！這邊是透過iOS模擬器執行的，如果要看到動態變動經緯度的效果，可以在模擬器的Debug -> Location ->設定成 City Run就會自動變動位置了。

delphi XE android 菜单 delphi app_Delphi_22


delphi XE android 菜单 delphi app_iOS_23

本文章程式碼下載 >> GitHub


這幾個禮拜下來，是不是覺得Delphi的開發時間大部份都是在拖拖拉拉畫面中渡過呢？培養了興趣之後，下週我們要開始回歸到比較嚴肅的基本語法課程囉 

delphi XE android 菜单 delphi app_iOS_24

後續 >> Delphi APP 開發入門（六）Object Pascal 語法初探