PinToo之地圖及定位

1. 說明

  該功能可實現高德地圖的顯示以及定位資訊的輸出。

  使用智能手機上的PinToo應用程式，實現顯示高德地圖的功能，包括顯示普通地圖與衛星地圖，設定地點資訊等功能；實現定位功能，提供定位獲取的周邊相關資訊。包括經緯度資訊，所在地區的地址資訊等。在使用以下功能之前，請先確認是否有給予PinToo相應的許可權。

2. 設計明細

  開啟PinToo設計器，分別加入下插圖之控制元件。或者點選左上角的[打開模板Lib檔案]，選擇模板檔案來打開對應模板。

  ①：TfxAMapView元件，控制元件名稱為fxAMapView1。

  ②：TfxAMap元件，控制元件名稱為fxMap1。

  ③：TfxTabControl元件，控制元件名稱為fxTabControl1。

  ④：TfxCheckBox元件，控制元件名稱為chkSetMyLocationButtonEnabled。

  ⑤：TfxCheckBox元件，控制元件名稱為chkSetScaleControlsEnabled。

  ⑥：TfxCheckBox元件，控制元件名稱為chkSetCompassEnabled。

  ⑦：TfxRadioButton元件，控制元件名稱為fxRadioButton1。

  ⑧：TfxRadioButton元件，控制元件名稱為fxRadioButton2。

  ⑨：TfxRadioButton元件，控制元件名稱為fxRadioButton3。

  ⑩：TfxRadioButton元件，控制元件名稱為fxRadioButton4。

  (11)：TfxSuperButton元件，控制元件名稱為fxSuperButton1。

• fxRunFrame屬性設定

  • Height：設定頁面高度=800。
  • Width：設定頁面寬度=400。

• ①fxAMapView1屬性設定

  • Height：設定控制元件高度=585。
  • Width：設定控制元件寬度=400。

• ③fxTabControl1屬性設定

  • Align：設定控制元件對齊方式=Client。佔用客戶區，標題部分對齊方式為Top。   雙擊fxTabControl1顯示如下圖所示的對話方塊，點選Add Item按鈕可新增Tab項。分別修改對應的Tab專案中的屬性。   新建完成後包含兩個TabItem，分別對應為TabItem1與TabItem2。TabItem1放置與地圖顯示相關的控制元件，TabItem2中放置與定位資訊顯示相關的控制元件。

• TabItem1屬性設定

  • CustomIcon：設定圖示，雙擊該屬性或者點選右側的[...]打開自定義圖表編輯器，點選左上角的[打開]打開資源管理器選擇所需的圖示檔案，點選[確認]將圖示載入至編輯框中。可對圖示的順序進行調整，預設顯示的是第一個圖示。
  • Text：設定頁面標籤顯示的文字內容=地圖。

• TabItem2屬性設定

  • CustomIcon：設定圖示，雙擊該屬性或者點選右側的[...]打開自定義圖表編輯器，點選左上角的[打開]打開資源管理器選擇所需的圖示檔案，點選[確認]將圖示載入至編輯框中。可對圖示的順序進行調整，預設顯示的是第一個圖示。
  • Text：設定頁面標籤顯示的文字內容=定位資訊。

• ④chkSetMyLocationButtonEnabled屬性設定

  • Name：設定控制元件名稱=chkSetMyLocationButtonEnabled。
  • Text：設定確認框的文字名稱=定位按鈕。

• ⑤chkSetScaleControlsEnabled屬性設定

  • Name：設定控制元件名稱=chkSetScaleControlsEnabled。
  • Text：設定確認框的文字名稱=比例尺。

• ⑥chkSetCompassEnabled屬性設定

  • Name：設定控制元件名稱=chkSetCompassEnabled。
  • Text：設定確認框的文字名稱=指南針。

• ⑦fxRadioButton1屬性設定

  • GroupName：設定單選按鈕所在的分組名稱=Language。
  • Text：設定單選按鈕顯示的文字內容=中文。

• ⑧fxRadioButton2屬性設定

  • GroupName：設定單選按鈕所在的分組名稱=Language。
  • Text：設定單選按鈕顯示的文字內容=英文。

• ⑨fxRadioButton3屬性設定

  • GroupName：設定單選按鈕所在的分組名稱=Type。
  • Text：設定單選按鈕顯示的文字內容=普通。

• ⑩fxRadioButton4屬性設定

  • GroupName：設定單選按鈕所在的分組名稱=Type。
  • Text：設定單選按鈕顯示的文字內容=衛星。

• (11)fxSuperButton1屬性設定

  • Height：設定控制元件高度=50。
  • Width：設定控制元件寬度=50。
  • ButtonType：設定按鈕型別，設定為TfxSvgButton。
  • ButtonType.SvgData：設定SVG數據，其數據內容如下。

  <path d="M27.4999485015869,3 C17.6554374694824,3 9.67519760131836,10.3865594863892 9.67519760131836,19.4994983673096 C9.67519760131836,33.249095916748 24.5290336608887,47 27.4999485015869,47 C30.4710178375244,47 45.3248023986816,33.249095916748 45.3248023986816,19.4994983673096 C45.3248023986816,10.3865585327148 37.3445129394531,3 27.4999485015869,3 Z M27.4999485015869,29.3999309539795 C22.5777187347412,29.3999309539795 18.5869960784912,25.4601078033447 18.5869960784912,20.5999698638916 C18.5869960784912,15.7398309707642 22.5777187347412,11.800009727478 27.4999485015869,11.800009727478 C32.4222793579102,11.800009727478 36.411750793457,15.7398309707642 36.411750793457,20.5999698638916 C36.411750793457,25.4601078033447 32.4222259521484,29.3999309539795 27.4999485015869,29.3999309539795 Z" p-id="9777" fill="#FFD81E06" stroke="Null"></path>
  

3. 程式設計

  點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式需要引用AMap,AMapNavi,AMapView單元。

3.1. 程式初始設定

  設定預設函式SetViewItem，用於快速向TfxListView元件對應的lvLocation中插入內容。

procedure SetViewItem(AText: String; ADetail: String);
begin
  with lvLocation.Items.Add do
  begin
    Text := AText;
    Detail := ADetail;
  end;
end;

  在程式啟動時顯示地圖。並顯示指南針、比例尺、定位按鈕等資訊。

Begin
  fxAMapView1.SetMyLocationEnabled(true);
  // 顯示指南針
  fxAMapView1.SetCompassEnabled(true);
  // 顯示比例尺
  fxAMapView1.SetScaleControlsEnabled(true);
  // 顯示定位按鈕
  fxAMapView1.SetMyLocationButtonEnabled(true);
  fxAMapView1.SetMyLocationEnabled(true); // 顯示我的位置
  fxAMapView1.SetMyLocationType(LOCATION_TYPE_FOLLOW);
  fxAMapView1.ShowMyLocationSingle(CCAMap_MarkerType_HUE_RED);
End.

3.2. 事件設定

• TabItem1-OnClick事件

  當點選頁面切換至地圖模式時顯示高德地圖的內容。

Procedure TabItem1OnClick(Sender: TObject);
//高德地圖顯示
Begin
  fxAMapView1.Visible := True;
End;

• TabItem2-OnClick事件

  當點選頁面切換至定位資訊模式時，高德地圖關閉顯示並開啟定位服務。

Procedure TabItem2OnClick(Sender: TObject);
//高德地圖顯示關閉
Begin
  fxAMapView1.Visible := False;
  lvLocation.ItemAppearanceObjects.ItemEditObjects.Detail.Height := 24;
  fxAMap1.StartLocation;
End;

• ②fxAMap1-OnLocationChangedCallbackEvent屬性設定

  當控制元件獲取到定位資訊時，更新定位資訊並在列表中顯示。

Procedure fxAMap1OnLocationChangedCallbackEvent(Sender: TObject; ErrorCode: Integer; ErrorInfo: string; LocationDetail: string; LocationType: Integer; Longitude: Double; Latitude: Double; Altitude: Double; Accuracy: Single; Provider: string; Speed: Single; Bearing: Single; Satellites: Integer; Country: string; Province: string; City: string; CityCode: string; District: string; AdCode: string; Address: string; PoiName: string; LocationTime: string; isWifiAble: Boolean; isWifiAbleString: string; GPSStatus: Integer; GPSStatusString: string);
Begin
    lvLocation.BeginUpdate; //修改ListView時要啟用Update
  try
    lvLocation.Items.Clear; //更新前清空ListView中的內容
    SetViewItem('提供者:'+ Provider,'');
    SetViewItem('經度:'+ FloatToStr(Longitude),'');
    SetViewItem('緯度:'+ FloatToStr(Latitude),'');
    SetViewItem('海拔:'+ FloatToStr(Altitude) + '米','');
    SetViewItem('精度:'+ FloatToStr(Accuracy) + '米','');
    SetViewItem('角度:'+FloatToStr(Bearing),'');
    SetViewItem('速度:'+ FloatToStr(Speed) + '米 / 秒','');
    SetViewItem('國家:'+  Country,'');
    SetViewItem('省:'+  Province,'');
    SetViewItem('市:'+ City,'');
    SetViewItem('城市編碼:'+  CityCode,'');
    SetViewItem('區:'+  District,'');
    SetViewItem('區域碼:'+  AdCode,'');
    SetViewItem('地址:'+  Address,'');
    SetViewItem('興趣點:'+  PoiName,'');
    SetViewItem('定位時間:'+  LocationTime,'');
    SetViewItem('WIFI開關:', isWifiAbleString);
    SetViewItem('GPS狀態:', GPSStatusString);
  finally
    lvLocation.EndUpdate(); //修改完成後，完成Update
  end; 
End;

• ⑦fxRadioButton1-OnClick事件

  當點選語言為中文單選按鈕時，設定地圖語言為中文。

Procedure fxRadioButton1OnClick(Sender: TObject);
//設定地圖語言為中文
Begin
  fxAMapView1.SetMapLanguage('zh_cn');
End;

• ⑧fxRadioButton2-OnClick事件

  當點選語言為英文按鈕時，設定地圖語言為英文。

Procedure fxRadioButton2OnClick(Sender: TObject);
//設定地圖語言為英文
Begin
  fxAMapView1.SetMapLanguage('en');
End;

• ⑨fxRadioButton3-OnClick事件

  當點選地圖型別為普通按鈕時，設定地圖型別為普通地圖。

Procedure fxRadioButton3OnClick(Sender: TObject);
//設定為普通地圖
Begin
  fxAMapView1.SetMapType(MAP_TYPE_NORMAL);
End;

• ⑩fxRadioButton4-OnClick事件

  當點選地圖型別為衛星按鈕時，設定地圖型別為衛星地圖。

Procedure fxRadioButton4OnClick(Sender: TObject);
//設定為衛星地圖
Begin
  fxAMapView1.SetMapType(MAP_TYPE_SATELLITE);
End;

• (11)fxSuperButton1-OnClick事件

  當點選定位按鈕時，地圖的相機將會移動至指定的經緯度區間內。

Procedure fxSuperButton1OnClick(Sender: TObject);
//移動相機至指定經緯度
Begin
  fxAMapView1.MoveCamera(120.1,30.3,1,1,1); //前兩個數據為經緯度。
  fxAMapView1.Zoom(18);
End;

• ④chkSetMyLocationButtonEnabled-OnChange事件

  當定位單選框選項發生變化時，根據其選中的情況來確定是否開啟定位按鈕的顯示。

Procedure chkSetMyLocationButtonEnabledOnChange(Sender: TObject);
//選擇「定位按鈕」，地圖上顯示定位按鈕(按鈕位於地圖的右上角，點選可移動至當前定位點的地圖區域)
Begin
  fxAMapView1.SetMyLocationButtonEnabled(chkSetMyLocationButtonEnabled.IsChecked);
End;

• ⑤chkSetScaleControlsEnabled-OnChange事件

  當比例尺單選框選項發生變化時，根據其選中的情況來確定是否開啟比例尺的顯示。

Procedure chkSetScaleControlsEnabledOnChange(Sender: TObject);
//選擇「比例尺」，地圖上顯示比例尺(比例尺一般位於地圖左下角)
Begin
  fxAMapView1.SetScaleControlsEnabled(chksetScaleControlsEnabled.IsChecked);
End;

• ⑥chkSetCompassEnabled-OnChange事件

  當指南針單選框選項發生變化時，根據其選中的情況來確定是否開啟指南針的顯示。

Procedure chkSetCompassEnabledOnChange(Sender: TObject);
//選擇「指南針」，地圖上顯示指南針(指南針一般位於地圖的左上角)
Begin
  fxAMapView1.SetCompassEnabled(chksetCompassEnabled.IsChecked);
End;

• ①fxAMapView1-OnLocationChangedCallbackEvent事件

  當定位資訊發生變化時，在地圖上進行定位的標註。

Procedure fxAMapView1OnLocationChangedCallbackEvent(Sender: TObject; ErrorCode: Integer; ErrorInfo: string; LocationDetail: string; LocationType: Integer; Longitude: Double; Latitude: Double; Altitude: Double; Accuracy: Single; Provider: string; Speed: Single; Bearing: Single; Satellites: Integer; Country: string; Province: string; City: string; CityCode: string; District: string; AdCode: string; Address: string; PoiName: string; LocationTime: string; isWifiAble: Boolean; isWifiAbleString: string; GPSStatus: Integer; GPSStatusString: string);
//當位置資訊發生變化時實時顯示
Begin
  if ErrorCode = 0 then
  begin
      //fxLabel1.Text := Address;
      fxAMapView1.Zoom(18);
      fxAMapView1.AddMarker3(Longitude + 0.00026, Latitude + 0.00016,'我是您的鄰居', '遠親不如緊鄰!', true, 0.0, true);
  end;
End;

4. 運行結果

  使用滑鼠在 PinToo 功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

  程式啟動后預設顯示地圖，可點選地圖語言，地圖型別中的單選按鈕，以及定位按鈕，比例尺，指南針等選框來檢視地圖顯示的效果。右側的定位按鈕點選可移動相機視角至指定的經緯度。

  切換至定位資訊欄，其中羅列了定位獲取到的數據資訊。可使用其中的經緯度資訊作為定位數據的採集。