全部服务产品
开发者频道
定价
登录
信息框
下载开发文档

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);

上一篇

地面覆盖物

下一篇

POI检索

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