鸿蒙 地图开发：标记（Marker）增加

开发中标记Marker是最常用的功能之一。点标记用来在地图上标记任何位置例如用户位置、车辆位置、店铺位置等一切带有位置属性的事物。本文介绍如下标记的基本使用添加标记、修改属性自定义标记自定义图标标记文字控制文字显隐、文字内容事件监听点击、拖拽、长按事件标记动画旋转、缩放、平移、透明、图片动画播放一、标记Map Kit提供的点标记功能Marker封装了大量的触发事件点击事件、长按事件、拖拽事件。版本说明版本新增功能5.1.1(19)支持控制Marker文字显隐功能6.0.0(20)支持自定义组件实现Marker图标功能6.1.1(24)支持监听Marker长按事件二、核心接口接口描述MarkerOptions标记参数addMarker(options)在地图上添加标记Marker标记支持更新和查询相关属性三、开发步骤3.1 导入模块import { MapComponent, mapCommon, map } from kit.MapKit; import { AsyncCallback } from kit.BasicServicesKit;3.2 添加标记Entry Component struct MarkerDemo { private mapOptions?: mapCommon.MapOptions; private mapController?: map.MapComponentController; private marker?: map.Marker; aboutToAppear(): void { this.mapOptions { position: { target: { latitude: 31.984410259206815, longitude: 118.76625379397866 }, zoom: 15 } }; this.callback async (err, mapController) { if (!err) { this.mapController mapController; let markerOptions: mapCommon.MarkerOptions { position: { latitude: 31.984410259206815, longitude: 118.76625379397866 }, rotation: 0, visible: true, zIndex: 0, alpha: 1, anchorU: 0.5, anchorV: 1, clickable: true, draggable: true, flat: false }; this.marker await this.mapController.addMarker(markerOptions); } }; } build() { Stack() { MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }) }.height(100%) } }3.3 MarkerOptions参数参数类型说明positionLatLng标记位置纬度、经度rotationnumber旋转角度visibleboolean是否可见zIndexnumber层级alphanumber透明度anchorUnumber锚点U坐标anchorVnumber锚点V坐标clickableboolean是否可点击draggableboolean是否可拖拽flatboolean是否平贴地图iconstring自定义图标rawfile相对路径annotationsArray文字标注配置collisionRuleCollisionRule碰撞规则titlestring信息窗标题snippetstring信息窗子标题3.4 修改标记属性// 设置标记可拖拽 this.marker.setDraggable(true); // 设置标记锚点 this.marker.setMarkerAnchor(1.0, 1.0);四、自定义标记在MarkerOptions中将icon属性设置为自定义图标的资源。let markerOptions: mapCommon.MarkerOptions { position: { latitude: 31.984410259206815, longitude: 118.76625379397866 }, icon: test.png // 图标存放在resources/rawfile }; this.marker await this.mapController.addMarker(markerOptions);五、控制Marker文字显隐let markerOptions: mapCommon.MarkerOptions { position: { latitude: 31.984410259206815, longitude: 118.76625379397866 }, annotations: [{ content: text, // 定义标题内容 fontStyle: 1, strokeWidth: 3, fontSize: 15 }] }; this.marker await this.mapController.addMarker(markerOptions); // 设置文字隐藏 this.marker.setAnnotationVisible(false); // 查询当前显隐状态 let isAnnotationVisible this.marker.isAnnotationVisible();六、碰撞检测通过设置collisionRule属性可以设置标记的冲突处理规则。let markerOptions: mapCommon.MarkerOptions { position: { latitude: 31.984410259206815, longitude: 118.76625379397866 }, icon: icon.png, annotations: [{ content: Test, fontStyle: 1, strokeWidth: 3, fontSize: 15 }], // 设置碰撞规则为图标和名称都参与碰撞 collisionRule: mapCommon.CollisionRule.ALL, annotationPosition: mapCommon.TextPosition.TOP };七、事件监听7.1 标记点击事件let callback (marker: map.Marker) { console.info(markerClick: ${marker.getId()}); }; this.mapEventManager.on(markerClick, callback);7.2 标记拖拽事件需要先设置标记可拖拽然后监听拖拽事件。// 设置标记可拖拽 this.marker.setDraggable(true); // 监听标记开始拖拽 this.mapEventManager.on(markerDragStart, (marker: map.Marker) { console.info(markerDragStart: ${marker.getId()}); }); // 监听标记拖拽过程 this.mapEventManager.on(markerDrag, (marker: map.Marker) { console.info(markerDrag: ${marker.getId()}); }); // 监听标记拖拽结束 this.mapEventManager.on(markerDragEnd, (marker: map.Marker) { console.info(markerDragEnd: ${marker.getId()}); });7.3 标记长按事件6.1.1let callback (markerLong: map.Marker) { console.info(markerLongClick: ${markerLong.getId()}); }; this.mapEventManager.onMarkerLongClick(callback);八、信息窗8.1 基础信息窗let markerOptions: mapCommon.MarkerOptions { position: { latitude: 31.984410259206815, longitude: 118.76625379397866 } }; this.marker await this.mapController?.addMarker(markerOptions); // 设置信息窗的标题和子标题 this.marker.setTitle(南京); this.marker.setSnippet(华东地区); // 设置标记可点击 this.marker.setClickable(true); // 设置信息窗的锚点位置 this.marker.setInfoWindowAnchor(1, 1); // 设置信息窗可见点击标记后可展示 this.marker.setInfoWindowVisible(true);8.2 自定义信息窗Entry Component struct MarkerDemo { private mapOptions?: mapCommon.MapOptions; private mapController?: map.MapComponentController; aboutToAppear(): void { this.mapOptions { position: { target: { latitude: 32.120750, longitude: 118.788765 }, zoom: 15 } }; this.callback async (err, mapController) { if (!err) { this.mapController mapController; let markerOptions: mapCommon.MarkerOptions { position: { latitude: 32.120750, longitude: 118.788765 }, clickable: true, title: 自定义信息窗 }; await this.mapController?.addMarker(markerOptions); } }; } BuilderParam customInfoWindow: ($$: map.MarkerDelegate) void this.customInfoWindowBuilder; Builder customInfoWindowBuilder($$: map.MarkerDelegate) { if ($$.marker) { Text($$.marker.getTitle()) .width(50%) .height(50) .backgroundColor(Color.Green) .textAlign(TextAlign.Center) .fontColor(Color.Black) } } build() { MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback, customInfoWindow: this.customInfoWindow }) } }九、标记动画9.1 动画类型动画类说明AlphaAnimation控制透明度的动画RotateAnimation控制旋转的动画ScaleAnimation控制缩放的动画TranslateAnimation控制平移的动画PlayImageAnimation控制多张图片的动画AnimationSet动画集合9.2 旋转动画示例let markerOptions: mapCommon.MarkerOptions { position: { latitude: 32.020750, longitude: 118.788765 } }; let marker: map.Marker await mapController.addMarker(markerOptions); // 构造RotateAnimation对象0度到270度 let animation new map.RotateAnimation(0, 270); animation.setDuration(2000); // 动画执行时间 animation.setFillMode(map.AnimationFillMode.BACKWARDS); // 动画结束状态 animation.setRepeatMode(map.AnimationRepeatMode.REVERSE); // 重复模式 animation.setRepeatCount(100); // 重复次数 // 设置动画开始/结束监听 animation.on(animationStart, () console.info(动画开始)); animation.on(animationEnd, () console.info(动画结束)); // 设置动画并启动 marker.setAnimation(animation); marker.startAnimation();9.3 图片动画播放let images: ArrayResourceStr | image.PixelMap [ icon/avocado.png, // rawfile目录 icon/20231027.png, $r(app.media.maps_blue_dot) // base/media目录 ]; let animation: map.PlayImageAnimation new map.PlayImageAnimation(); await animation.addImages(images); animation.setDuration(3000); animation.setFillMode(map.AnimationFillMode.BACKWARDS); animation.setRepeatMode(map.AnimationRepeatMode.REVERSE); animation.setRepeatCount(100); marker.setAnimation(animation); marker.startAnimation();十、自定义组件实现Marker图标6.0.0Entry Component struct MarkerDemo { aboutToAppear(): void { this.callback async (err, mapController) { if (!err) { let markerOptions: mapCommon.MarkerOptions { position: { latitude: 32.120750, longitude: 118.788765 }, iconBuilder: () { this.renderBuilder(); } // 自定义组件 }; this.marker await this.mapController?.addMarker(markerOptions); } }; } Builder renderBuilder() { Stack({ alignContent: Alignment.Center }) { Image($r(app.media.iconbuilder)).syncLoad(true) } .height(50) .width(50) } }