信息框
从2.0.0版本开始,不再支持InfoWindow覆盖物类型,请使用PopView进行信息框开发。
PopView
.png)
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)=>{})// 附加PopViewthis.marker?.setPopView(popView);}this.mapController?.addOverlay(this.marker);
InfoWindow
InfoWindow 类可以通过设置content纹理资源、position位置点以及yOffset偏移值,实现信息框覆盖物的创建。
可通过ArkUI获取PixelMap,赋值给InfoWindow实现信息框。
@Builderfunction 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);
上一篇
下一篇
本篇文章对您是否有帮助?