场景介绍

本章节将向您介绍如何在地图的指定位置添加气泡。

您可以通过气泡在道路上指定位置显示测速、拥堵情况。气泡支持功能：

• 支持设置四个方向的图标（传入的图标宽高需要相同）。
• 支持设置图标碰撞规则。
• 支持设置当前气泡的候选坐标段，通过计算使气泡在最佳的线段位置上。
• 支持设置图标动画。
• 支持添加点击事件。

接口说明

添加气泡功能主要由BubbleParams、addBubble和Bubble提供，更多接口及使用方法请参见接口文档。

接口名	描述
BubbleParams	气泡相关属性。
addBubble(params: mapCommon.BubbleParams): Promise<Bubble>	在地图上添加气泡。
Bubble	气泡，支持更新和查询相关属性。

开发步骤

添加气泡

1. 导入相关模块。
   1. import { MapComponent, mapCommon, map } from '@kit.MapKit';
   2. import { AsyncCallback } from '@kit.BasicServicesKit';
2. 添加气泡，在Callback方法中创建初始化参数并新建气泡。
   1. @Entry
   2. @Component
   3. struct BubbleDemo {
   4. private mapOption?: mapCommon.MapOptions;
   5. private mapController?: map.MapComponentController;
   6. private callback?: AsyncCallback<map.MapComponentController>;
   7. private bubble?: map.Bubble;
   8. aboutToAppear(): void {
   9. this.mapOption = {
   10. position: {
   11. target: {
   12. latitude: 39.918,
   13. longitude: 116.397
   14. },
   15. zoom: 14
   16. }
   17. };
   18. this.callback = async (err, mapController) => {
   19. if (!err) {
   20. this.mapController = mapController;
   21. let bubbleOptions: mapCommon.BubbleParams = {
   22. // 气泡位置
   23. positions: [[{ latitude: 39.918, longitude: 116.397 }]],
   24. // 设置图标，必须提供4个方向的图标，图标存放在resources/rawfile
   25. icons: [
   26. 'speed_limit_10.png',
   27. 'speed_limit_20.png',
   28. 'speed_limit_30.png',
   29. 'speed_limit_40.png'
   30. ],
   31. // 定义气泡的显示属性，为true时，在被碰撞后仍能显示
   32. forceVisible: true,
   33. // 定义气泡碰撞优先级，数值越大，优先级越低
   34. priority: 3,
   35. // 定义气泡展示的最小层级
   36. minZoom: 2,
   37. // 定义气泡展示的最大层级
   38. maxZoom: 20,
   39. // 定义气泡是否可见
   40. visible: true,
   41. // 定义气泡叠加层级属性
   42. zIndex: 1
   43. }
   44. // 添加气泡
   45. this.bubble = await this.mapController.addBubble(bubbleOptions);
   46. }
   47. };
   48. }
   49. build() {
   50. Stack() {
   51. Column() {
   52. MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback });
   53. }.width('100%')
   54. }.height('100%')
   55. }
   56. }

   

设置监听气泡点击事件

1. this.mapController?.on("bubbleClick", (bubble) => {
2. console.info(`on-BubbleClick bubble = ${bubble.getId()}`);
3. });

气泡动画

Bubble调用setAnimation(animation: Animation)设置动画。

Bubble调用startAnimation启动动画。

1. let animation: map.ScaleAnimation = new map.ScaleAnimation(1, 3, 1, 3);
2. // 设置动画单次的时长
3. animation.setDuration(3000);
4. // 设置动画的开始监听
5. animation.on("start", () => {
6. console.info('start ScaleAnimation');
7. });
8. // 设置动画的结束监听
9. animation.on("end", () => {
10. console.info('end ScaleAnimation');
11. });
12. // 设置动画执行完成的状态
13. animation.setFillMode(map.AnimationFillMode.BACKWARDS);
14. // 设置动画重复的方式
15. animation.setRepeatMode(map.AnimationRepeatMode.REVERSE);
16. // 设置动画插值器
17. animation.setInterpolator(Curve.Linear);
18. // 设置动画的重复次数
19. animation.setRepeatCount(100);
20. this.bubble.setAnimation(animation);
21. this.bubble.startAnimation();