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

信息框

下载开发文档

从2.0.0版本开始,不再支持InfoWindow覆盖物类型,请使用PopView进行信息框开发。

PopView

PopView可以通过设置LableUI文本UI,TextStyle文本样式,HorizontalLayout水平布局,VerticalLayout垂直布局,ImageUI设置图像UI,来实现信息框覆盖物的创建。

Marker的 icon图标通过ImageEntity对象设置,通过透明图标作为瞄点,来实现信息框。

import {MapController,Marker,ImageEntity,SysEnum,LabelUI,CommonEvent,TextStyle,PopView} from '@bdmap/map';
mapController: MapController | null = null;
marker: Marker | null = null;
// transparent.png为透明图标
let image = new ImageEntity('rawfile://transparent.png');
this.marker = new Marker({
position: new LatLng(39.904835, 116.403119),
icon: image,
located: SysEnum.Located.CENTER,
isClickable: false
});
/** 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.setBackgroundColor('#ffff')
layout.setGravity(SysEnum.Gravity.GRAVITY_LEFT);
let img = new ImageUI();
img.setDrawableResource(new ImageEntity('rawfile://two.png'));
img.setWidth(64);
img.setHeight(64);
layout.addView(img);
let label = new LabelUI();
label.setGravity(SysEnum.Gravity.GRAVITY_CENTER);
// 提示信息设置
label.setText("#BmMarker# 百度地图");
label.setBackgroundColor('rgba(255,235,59,0.5)')
label.setPadding(20, 0, 0, 0);
label.setClickable(false);
label.addEventListener(CommonEvent.CLICK,(e:EventUIBundle)=>{
})
let txtStyle = new TextStyle();
txtStyle.setTextColor('rgba(255,0,255,1)');
txtStyle.setTextSize(28);
txtStyle.setFontOption(SysEnum.FontOption.BOLD);
label.setStyle(txtStyle);
layout.addView(label);
let popView = this.popView = new PopView();
popView.setVisibility(SysEnum.Visibility.VISIBLE);
popView.setView(layout);
popView.setLocated(SysEnum.Located.CENTER);
popView.addEventListener(CommonEvent.CLICK,(e:EventUIBundle)=>{
})
// 附加PopView
this.marker?.setPopView(popView);
}
this.mapController?.addOverlay(this.marker);

InfoWindow

InfoWindow 类可以通过设置content纹理资源、position位置点以及yOffset偏移值,实现信息框覆盖物的创建。

效果示例

可通过ArkUI获取PixelMap,赋值给InfoWindow实现信息框。

@Builder
function RandomBuilder(a:string,b:string) {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text('Test menu item ' + a)
.fontSize(20)
.width(100)
.height(50)
.textAlign(TextAlign.Center)
Divider().color('#00ff00').height(10)
Text('Test menu item ' + b)
.fontSize(20)
.width(100)
.height(50)
.textAlign(TextAlign.Center)
}
.width(100)
.height(100)
.backgroundColor('#ff88')
.borderRadius(10)
.id("builder")
}
componentSnapshot.createFromBuilder(()=>{RandomBuilder.bind(this)('ONE','TWO')})
.then((pixmap: image.PixelMap) => {
let info = componentUtils.getRectangleById("builder")
let infoWin = this.infoWin = new InfoWindow({
anchorX: 0.5,
anchorY: 0,
content: new ImageEntity(pixmap,info.size.width,info.size.height)
})
infoWin.addEventListener(OverlayEvent.CLICK,()=>{
promptAction.showToast({
message: '信息框点击',
duration: 2000,
});
});
this.marker?.setInfoWindow(infoWin);
}).catch((err:Error) => {
console.log("error: " + err)
})

通过直接使用图片纹理的形式赋值给InfoWindow实现信息框。

let info2 = new InfoWindow({
position: new LatLng(39.914835, 116.413119),
content: new ImageEntity('rawfile://info.png'),
isPerspective: false,
yOffset: -49
});
info2.addEventListener(OverlayEvent.CLICK,()=>{
promptAction.showToast({
message: '信息框点击',
duration: 2000,
});
});
this.mapController?.addOverlay(info2);

上一篇

位置短地址分享

下一篇

请求状态码说明

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