地圖及定位

# 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識別定位精靈→