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

 

标签:const,对象,标签,Marker,ChinaCock,AText,标注,高德,图文
来源: https://www.cnblogs.com/kinglandsoft/p/16261378.html