1. 程式人生 > 其它 >圖文解說ChinaCock高德地圖元件-為標註設定浮動標籤顯示 (三)

圖文解說ChinaCock高德地圖元件-為標註設定浮動標籤顯示 (三)

繼續前文,我們實現了,讓使用者直接在地圖上設定標註,然後取得標註點的經緯度及詳細地址,實現使用者採集指定企業的地址資訊。

在實際需求中,使用者還想滑鼠經過標註時,能顯示單位在名稱,離開時自動隱藏,如下圖:

看一下具體的實現:

1.建立標籤物件

在地圖初始化時,我們為地圖建一個籤標物件,下面這段程式碼在FormCreate事件實現,初始化地圖物件時建立一標籤物件,同Marker類似,地圖物件有Texts屬性,可以管理N多個標籤物件。

  // 建立一個Text物件,顯示標註名稱
  var
  AText := self.CCuniGUIAMap1.Texts.Add;
  with AText do
begin with Options do begin // 指定滑鼠懸停時的滑鼠樣式。 Anchor := 'center'; cursor := 'pointer'; Options.Offset.Y := -48; // 設定文字樣式,Object同css樣式表,如:{'background-color':'red'} Style := '{' + '"border-radius":".25rem"' + ',"background-color": "white"' + '
,"border-width": 0' + ',"box-shadow":"0 2px 6px 0 rgba(0, 0, 0, .5)"' + ',"text-align":"center"' + ',"font-size":"10px"' + ',"color": "#FF0000"' + '}'; end; end;

2.準備標籤內容

在Marker物件上儲存企業名稱,Marker物件有CustomParams屬性,可以儲存任意的值進去,程式碼如下,在地圖上建立一個Marker物件時,直接儲存要顯示的企業名稱。

      myMarker.CustomParams.Values['
CorpName'] := self.CorpName;

3.自動為標註顯示標籤

這需要在進入Marker時顯示名稱。正好,地圖物件為我們提供了MarkerMouseOver事件,滑鼠移到標註上時觸發,在這個事件中顯示標籤:

procedure TGaoDeMapForm.CCuniGUIAMap1MarkerMouseOver(const ASender: TObject;
  const AMarker: TCCuniGUIAMap.TMarker; const ALngLat: TLngLat;
const AEventParams: TUniStrings);
begin
  var
  AText := self.CCuniGUIAMap1.Texts.Items[0];//取出Text物件

  AText.Show; // 必須先執行才顯示正常

  AText.SetPosition(AMarker.Options.Position);//設定顯示位置
  AText.SetText(AMarker.CustomParams.Values['CorpName']);//取出Marker儲存的企業名稱

end;

4.自動隱藏標註的標籤

當用戶滑鼠離開Marker時,會觸發MarkerMouseOut事件,在這個事件中隱藏標籤,程式碼如下:

procedure TGaoDeMapForm.CCuniGUIAMap1MarkerMouseOut(const ASender: TObject;
  const AMarker: TCCuniGUIAMap.TMarker; const ALngLat: TLngLat;
const AEventParams: TUniStrings);
begin
  var
  AText := self.CCuniGUIAMap1.Texts.Items[0];
  AText.Hide;//mouse離開標註時,隱藏標籤
end;

OK,現在標註的標籤可以自動顯示與隱藏了!