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，并且已经登陆。

  程序启动后默认显示地图，可点击地图语言，地图类型中的单选按钮，以及定位按钮，比例尺，指南针等选框来查看地图显示的效果。右侧的定位按钮点击可移动相机视角至指定的经纬度。

  切换至定位信息栏，其中罗列了定位获取到的数据信息。可使用其中的经纬度信息作为定位数据的采集。