圖文解說ChinaCock高德地圖元件-為標註設定浮動標籤顯示 (三)
阿新 • • 發佈:2022-05-13
繼續前文,我們實現了,讓使用者直接在地圖上設定標註,然後取得標註點的經緯度及詳細地址,實現使用者採集指定企業的地址資訊。
在實際需求中,使用者還想滑鼠經過標註時,能顯示單位在名稱,離開時自動隱藏,如下圖:
看一下具體的實現:
1.建立標籤物件
在地圖初始化時,我們為地圖建一個籤標物件,下面這段程式碼在FormCreate事件實現,初始化地圖物件時建立一標籤物件,同Marker類似,地圖物件有Texts屬性,可以管理N多個標籤物件。
// 建立一個Text物件,顯示標註名稱 var AText := self.CCuniGUIAMap1.Texts.Add; with AText dobegin 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,現在標註的標籤可以自動顯示與隱藏了!