ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

图文解说ChinaCock高德地图组件-为标注设置浮动标签显示 (三)

2022-05-13 08:01:07  阅读:171  来源: 互联网

标签:const 对象 标签 Marker ChinaCock AText 标注 高德 图文


继续前文,我们实现了,让用户直接在地图上设置标注,然后取得标注点的经纬度及详细地址,实现用户采集指定企业的地址信息。

在实际需求中,用户还想鼠标经过标注时,能显示单位在名称,离开时自动隐藏,如下图:

看一下具体的实现:

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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有