产品服务
解决方案
文档与支持
定价

绘制文字

下载开发文档

可以在地图上叠加自定义文字,由Label类定义,效果图如下:

效果示例

示例代码如下:

// 添加文字标注
let label = new Label();
label.text('百度地图\\3S').fontSize(32).position(new LatLng(36.925, 113.4013)).bgcolor('rgba(255,235,59,0.5)').setFontColor('rgba(255,0,255,1)');
this.mapController.addOverlay(label);
// 添加文字标注
let label2 = new Label();
label2.text('百度地图\\4S').fontSize(32).position(new LatLng(36.625, 113.4013)).fontType(Label.BOLD).bgcolor('rgba(255,235,59,0.6)').setFontColor('rgba(255,0,255,1)');
this.mapController.addOverlay(label2);
// 添加文字标注
let label3 = new Label();
label3.text('百度地图\\5S').fontSize(32).position(new LatLng(36.425, 113.4013)).fontType(Label.BOLD_ITALIC).bgcolor('rgba(255,235,59,0.8)').setFontColor('rgba(8, 18, 203, 1.00)');
this.mapController.addOverlay(label3);
// 添加文字标注
let label4 = new Label();
label4.text('百度地图\\6S').fontSize(32).position(new LatLng(36.225, 113.4013)).fontType(Label.ITALIC).bgcolor('rgba(255,235,59,1)').setFontColor('rgba(1, 55, 10, 1.00)');
this.mapController.addOverlay(label4);
// 改变文字颜色
this.mapController.addOverlayEventListener(EOverLayTypeName.LABEL,OverlayEvent.CLICK,(bundle:EventOverlayBundle)=>{
let labels = bundle.target as Array<Overlay>;
if(labels && labels.length>0){
labels.forEach(item=>{
if(item instanceof Label){
item.setFontColor('#000');
promptAction.showToast({
message: '点击文字',
duration: 2000,
});
}
});
}
});
}

添加信息窗

可以在地图上叠加自定义文字,由PopView类定义

示例代码如下:

import { MapController, Label, LabelUI, TextStyle, SysEnum, PopView, LatLng } from '@bdmap/map';
mapController: MapController | null = null;
let label = new Label({
position: new LatLng(39.904835, 116.403119),
located: SysEnum.Located.BOTTOM,
text: '公园',
fontsize: 35,
fontcolorstr: 'rgba(255,0,255,1)'
});
/** PopView */
{
let layout = new HorizontalLayout();
layout.setBackground(new ImageEntity("rawfile://pop_bottom.png"),{
/** 横向可缩放区域 [x1,x2] or [x1,x2,x3,x4] @since 1.2.0*/
scaleX: [20,40,100,120],
/** 纵向可缩放区域 [y1,y2] or [y1,y2,y3,y4] @since 1.2.0*/
scaleY: [40,80],
/**「.9」的内容区域 [x1,x2,y1,y2] @since 1.2.0*/
fillArea: [20,120,20,80]
})
layout.setGravity(SysEnum.Gravity.CENTER)
let labelUI = new LabelUI();
labelUI.setGravity(SysEnum.Gravity.GRAVITY_CENTER);
// 提示信息设置
labelUI.setText("######休闲散步公园#");
labelUI.setBackgroundColor('rgba(255,235,59,0.5)')
labelUI.setPadding(20, 0, 0, 0);
labelUI.setClickable(false);
labelUI.addEventListener(CommonEvent.CLICK,(e:EventUIBundle)=>{
})
let txtStyle = new TextStyle();
txtStyle.setTextColor('rgba(255,235,59,0.5)');
txtStyle.setTextSize(28);
txtStyle.setFontOption(SysEnum.FontOption.BOLD);
labelUI.setStyle(txtStyle);
layout.addView(labelUI);
let popView = new PopView();
popView.setVisibility(SysEnum.Visibility.VISIBLE);
popView.setView(layout);
popView.setLocated(SysEnum.Located.TOP);
popView.addEventListener(CommonEvent.CLICK,(e:EventUIBundle)=>{
})
// 附加PopView
label.setPopView(popView);
}
this.mapController?.addOverlay(label);

上一篇

位置短地址分享

下一篇

请求状态码说明

本篇文章对您是否有帮助?