地图及定位

# Smart之高德地图

# 1. 说明

本范例通过高德地图实现地图的浏览与查看功能。通过该地图，您可以实现地图的浏览与查看，地图地点测距，以及定位点显示的功能。

通过本范例学习，可以掌握AMapView的基本使用方法。

# 2. 设计明细

开启Smart智慧控制平台，分别加入下插图之控件。或者通过点击菜单栏[文件]-[打开项目]选择范例项目文件来打开该范例。

①：TPanel组件，控件名称为pnAMapView。

②：TAMapView组件，控件名称为AMapView。

③：TTimer组件，控件名称为Timer1。

④：TRadioGroup组件，控件名称为rgLanguage。

⑤：TRadioGroup组件，控件名称为rgMapType。

⑥：TPanel组件，控件名称为pnBar。

⑦：TCheckBox组件，控件名称为ckTraffic。

⑧：TButton组件，控件名称为btnQuery。

⑨：TBitBtn组件，控件名称为BitBtnRule。

⑩：TBitBtn组件，控件名称为BitBtnCloseDraw。

(11)：TButton组件，控件名称为btnLocate。

Main窗体属性设置
- BorderStyle：设置边界样式=bsDialog。
- ClientHeight：设置客户区窗体的高度=600。
- ClientWidth：设置窗体客户区的宽度=823。
①pnAMapView属性设置
- Align：设置对齐方式=alClient。
- Name：设置控件名称=pnAMapView。
②AMapView属性设置
- Align：设置对齐方式=alClient。
- Options.center：设置地图中心的经纬度，此处设置为Latitude=30.738955，Longtitude=120.74718。
- Name：设置控件名称为AMapView。
- Key：设置显示地图定位信息的密钥，设置为3e20dffdda1288cf756ff92fb3556bbc。
③Timer1属性设置
- Interval：设置计时器的时间间隔=200。
④rgLanguage属性设置
- Caption：设置组标题头=选择地图语言。
- Columns：设置组列的数量=3。
- Height：设置控件高度=54。
- Width：设置控件宽度=201。
- Items：设置选择项，双击该属性或者点击右侧的[...]打开编辑器，输入选项，每个选项之间需回车换行区分。
- Name：设置控件名称=rgLanguage。
- ItemIndex：设置选择的默认项=2，对应为中文。
⑤rgMapType属性设置
- Caption：设置组标题头=选择地图类型。
- Columns：设置组列的数量=2。
- Height：设置控件高度=54。
- Width：设置控件宽度=185。
- Items：设置选择项，双击该属性或者点击右侧的[...]打开编辑器，输入选项，每个选项之间需回车换行区分。
- Name：设置控件名称=rgMapType。
- ItemIndex：设置选择的默认项=0，对应为普通地图。
⑥pnBar属性设置
- Align：设置对齐方式=alBottom。
- Height：设置高度=65。
- Color：设置颜色=clInactiveBorder。
- Name：设置控件名称=pnBar。
⑦ckTraffic属性设置
- Caption：设置字幕=显示实时路况。
- Name：设置控件名称=ckTraffic。
⑧btnQuery属性设置
- Caption：设置按钮显示的文字内容=显示定位。
- Height：设置高度=25。
- Width：设置宽度=75。
- Name：设置控件名称=btnQuery。
⑨BitBtnRule属性设置
- Caption：设置按钮显示的字幕内容=测距。
- Layout：设置按钮中文字与图像的相对位置=blGlyphLeft。
- Height：设置高度=25。
- Width：设置宽度=75。
- Glyph：设置图片，双击该属性或者点击属性右侧的[...]打开文件上传界面，点击[Load...]从文件浏览器中选择对应的图片文件上传，返回该界面下，待显示出图片后点击[OK]加载图片。
⑩BitBtnCloseDraw属性设置
- Caption：设置按钮显示的字幕内容=退出。
- Layout：设置按钮中文字与图像的相对位置=blGlyphLeft。
- Height：设置高度=25。
- Width：设置宽度=75。
- Glyph：设置图片，双击该属性或者点击属性右侧的[...]打开文件上传界面，点击[Load...]从文件浏览器中选择对应的图片文件上传，返回该界面下，待显示出图片后点击[OK]加载图片。
(11)btnLocate属性设置
- Caption：设置按钮显示的文字内容=显示定位。
- Height：设置高度=25。
- Width：设置宽度=75。

# 3. 程序设计

# 3.1. 程序初始化设置

在程序启动时加载地图。

constructor TMyHandler.Create(AOwner: TComponent);
begin
  FThis :=TBaseForm(AOwner);
  paxfunc.AdvancedInfo(FThis.AMapView);
  FThis.AMapView.LoadMap;
end;

1
2
3
4
5
6

# 3.2. 事件设置

AMapView-OnMapClickEvent事件

当点击地图时，在相应位置显示标记。

procedure TMyHandler.AMapViewMapClickEvent;
var
 FPos: TCCAMapLngLat; 
 vAMapMarker:TCCAMapMarker;
begin
  FPos:=APos;   
  //FThis.Caption := FloatToStr(APos.Longitude)+','+ FloatToStr(APos.Latitude);  
  FThis.TagString := '';
  //TCCAMapLngLat与TCCLngLat类型不匹配
  paxfunc.GetMarkerAddress(FThis.AMapView,APos,FThis);      
  FThis.AMapView.Markers.Clear;
  vAMapMarker := paxfunc.AddMarker(FThis.AMapView); 
    if FThis.AMapView.MapLoadCompleted then
	begin  
	  with vAMapMarker do
	  begin
		Title := FThis.TagString;
		Position.Longitude := APos.Longitude;
                FThis.AMapView.Options.center.Longitude := APos.Longitude; 
		Position.Latitude := APos.Latitude;
                FThis.AMapView.Options.center.Latitude := APos.Latitude;
		// 设置了Content属性Icon属性失效。要自定义丰富的标记就用Content属性吧
		Content:='<div>';
		Content:=Content+
		  '<image src="http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"></image>';
	   //Content:=Content+'<span style="white-space: nowrap;border:1px solid #fff;background-color:#ff0000;font-size: 12px;color:white;  padding: 4px 10px;">'+FThis.TagString+'</span>';
		// 图片19   x   31   pixels
		Content:=Content+'</div>'; // 必须有根div元素 不然缩放时图标位置不会更新
		draw;
	  end; 
    end;  
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

③Timer1-OnTimer事件

计时器定时触发事件，更新标题为地图地点信息。

procedure TMyHandler.Timer1Timer;
begin
  FThis.Caption := FThis.TagString;
end;

1
2
3
4

④rgLanguage-OnClick事件

当点击语言选项按钮时触发该事件，根据点击选择的选项来切换地图的显示语言。

procedure TMyHandler.rgLanguageClick;
//切换地图语言
begin
  case FThis.rgLanguage.ItemIndex of
    0:
      begin
        TCCAMapMapOptions(FThis.AMapView.Options).lang := en;
      end;
    1:
      begin
        TCCAMapMapOptions(FThis.AMapView.Options).lang := zh_en;
      end;
    2:
      begin
        TCCAMapMapOptions(FThis.AMapView.Options).lang := zh_cn;
      end;
  end;  
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

⑤rgMapType-OnClick事件

当点击地图类型选项按钮时触发该事件，根据点击选择的选项来切换地图显示的类型。

procedure TMyHandler.rgMapTypeClick;
//切换地图类型
begin
  case FThis.rgMapType.ItemIndex of
    0: //普通地图
    begin
      FThis.AMapView.Satellite.Visible := False;
    end;
    1:  //卫星地图
    begin
      FThis.AMapView.Satellite.Visible := True;
    end;
  end;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

⑦ckTraffic-OnClick事件

当点击显示实时路况前面的选框时，根据当前的选择状态切换显示。

procedure TMyHandler.ckTrafficClick;
//显示交通状况
begin
  FThis.AMapView.Traffic.Visible := FThis.ckTraffic.Checked;
end;

1
2
3
4
5

⑧btnQuery-OnClick事件

当点击[地图查询]按钮时，打开地图查询界面。

procedure TMyHandler.btnQueryClick;
//地图查询
begin
  with FThis.AMapView.AdvancedInfoWindows[0] do
  begin
        AsOrigin:=true;//带：从这里出发输入框
        AsDestination:= true;//带：到这里去输入框
        PlaceSearch:=true;//带:在附近搜索框
        show;
  end; 
end;

1
2
3
4
5
6
7
8
9
10
11

⑦BitBtnRule-OnClick事件

点击按钮时开启测距模式。

procedure TMyHandler.BitBtnRuleClick;
//测距
begin
  FThis.AMapView.setDefaultCursor('pointer');
  FThis.AMapView.MouseTool.Rule.UseDefaultStyle := true;
  FThis.AMapView.MouseTool.Rule.StartDraw; 
end;

1
2
3
4
5
6
7

⑧BitBtnCloseDraw-OnClick事件

当点击按钮时关闭测距模式。

procedure TMyHandler.BitBtnCloseDrawClick;
//退出
begin
  FThis.AMapView.MouseTool.close(true,333);
  FThis.AMapView.setDefaultCursor(''); 
end;

1
2
3
4
5
6

⑨btnLocate-OnClick事件

当点击按钮时在地图的指定位置添加标记。

procedure TMyHandler.btnLocateClick;
//定位
var
 vAMapMarker:TCCAMapMarker;   
 vSpan:string;
Begin
  TCCAMapMarkers(FThis.AMapView.Markers).Clear; 
  if FThis.AMapView.MapLoadCompleted then
  begin  
    vAMapMarker := paxfunc.AddMarker(FThis.AMapView);
    with vAMapMarker do
    begin
      Position.Longitude := 120.74718;
      Position.Latitude := 30.73895;
      // 设置了Content属性Icon属性失效。要自定义丰富的标记就用Content属性
      Content:='<div>';
      Content:=Content+'<image src="http://webapi.amap.com/images/car.png"></image>';                          
      //'<image src="http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"></image>';
      Content:=Content+
      '<span style="white-space: nowrap;border:1px solid #fff;background-color:#ff0000;font-size: 12px;color:white;  padding: 4px 10px;">'+vSpan+'</span>';
      // 图片19   x   31   pixels
      Content:=Content+'</div>'; // 必须有根div元素 否则缩放时图标位置不会更新
      draw;
     end;
   end;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 4. 运行结果

通过工具栏保存，将程序保存为 sdb 项目文件。

使用鼠标点击工具栏运行（Run），测试运行结果。在选择地图语言框中选择语言，地图切换成对应的语言类型。在选择地图类型框中选择地图类型，地图切换成对应的地图类型。显示实时路况勾选后，地图上的路网将会显示颜色以区分路段的拥堵程度。点击[测距]按钮，地图进入测距模式，在地图上点击，根据点距显示距离。在最后一个点双击，显示点击的路线的距离。点击[退出]按钮清空路线以及距离信息。点击[显示定位]显示默认的定位标记信息。在地图上进行任意点击，地图上点击处作出标记，标题栏显示地点位置信息，点击[地图查询]显示地图查询对话框信息。

← OCR识别定位精灵→