html 的smap标签,SMap.Label

本文详细介绍了如何在SMap中使用Label组件,包括创建Label对象的方法,设置经纬度位置和LabelOptions参数,如字体样式、背景、边框等。实例演示了如何为地图、Marker和自定义位置添加文字标签。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

说明

Label是地图上的文字标签。它有两个参数lngLat与option,lnglat用来设置文字标签的显示位置,option用来设置文字标签的字体样式、内容等。

构造函数

通过经纬度坐标及参数选项确定Label信息。

参数

lnglat:SMap.LngLat 描述label显示的位置

option:SMap.LabelOptions 参数选项,参照LabelOptions,未设置时采用默认选项。

注释

目前只有地图、Marker点、面支持文字标签。

示例1

//简单的Label对象构建方法,在地图上添加Lable:

var opt=new SMap.LabelOptions();

opt.content= "Sina!";

var label=new SMap.Label(new SMap.LngLat(116.398258 ,39.904600),opt);

mapObj.addOverlay(label);

示例2

//展示各种属性的 Label对象构建方法,在地图上添加Lable:

var opt=new SMap.LabelOptions();

opt.content= "Sina!";

opt.hasBackground=true;

opt.hasBorder =true;

opt.backgroundColor=0xFFFF66 ;

opt.borderColor=0xFFFFFF;

opt.alpha =0.8;

opt.fontStyle.name="黑体";

opt.fontStyle.size="20";

opt.fontStyle.bold=true;

opt.fontStyle.color=0x000d46;

opt.labelAlign=SMap.TOP_LEFT;

opt.labelPosition=new SMap.Point(-30,-100);

var label=new SMap.Label(new SMap.LngLat(116.398258 ,39.904600),opt);

mapObj.addOverlay(label,true);

示例3

//展示各种属性的 Label对象构建方法,添加与Marker结合的Lable:

var markerOption = new SMap.MarkerOptions();

var opt=new SMap.LabelOptions();

opt.content= "Sina!";

opt.hasBackground=true;

opt.hasBorder =true;

opt.backgroundColor=0xFFFF66 ;

opt.borderColor=0xFFFFFF;

opt.alpha =0.8;

opt.fontStyle.name="黑体";

opt.fontStyle.size="20";

opt.fontStyle.bold=true;

opt.fontStyle.color=0x000d46;

opt.labelAlign=SMap.TOP_LEFT;

opt.labelPosition=new SMap.Point(-30,-100);

markerOption.labelOption=opt;

var ll = new SMap.LngLat(116.398258 ,39.9046);

var marker = new SMap.Marker(ll,markerOption);

mapObj.addOverlay(marker,true);

属性

id:String

对象编号,也是对象的唯一标识。

TYPE:SMap.Constant

覆盖物的类型。

取值

SMap.Overlay.TYPE_LABEL

label显示的位置。

Label的参数选项,参照LabelOptions。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值