图文解说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,现在标注的标签可以自动显示与隐藏了!