鸿蒙开发实战案例：地图大头针选择位置并显示弹窗组件案例

2025-04-17 本文已影响0人迪士尼在逃程序员

介绍

本示例提供了大头针选择位置并显示弹窗组件的解决方案。该大头针组件分为三个状态，分别是静止态（地图移动过程中，大头针无动画）、加载态（地图停止移动，等待获取地址信息，大头针展示波纹动画表示数据加载中）、显示态（数据加载完成，弹窗显示地址相关信息）。开发者可根据需要直接引入该组件，根据具体使用场景，传入不同的数据，组件根据传入数据的情况显示不同的状态。由于使用场景中，大头针动画需要随时停止，因此选用@ohos.animator实现大头针的波纹和跳动动画。

效果图预览

使用说明

该大头针选择位置并显示弹窗组件入参详细说明如下：

thumbTackState：用于设置大头针状态，ThumbTackState.EMPTY、ThumbTackState.LOADING、ThumbTackState.SHOWING。
address：组件处于ThumbTackState.SHOWING状态时，需要显示的地址文本；组件处于其他状态时，需设置为null。
tip：组件处于ThumbTackState.SHOWING状态时，需要显示的当前地址的一些提示，组件处于其他状态或无提示文本时，需设置为null。
tipBackgroundColor：组件处于ThumbTackState.SHOWING状态时，提示文本的背景色。
addrImage：组件处于ThumbTackState.SHOWING状态时，要展示的地址实景图，组件处于其他状态或无实景图时，需设置为null。
onImageClickCallback：实景图被点击时回调
onAddrClickCallback：地址被点击时回调
thumbTackWidth：用于设置大头针的宽度
animationFinishCallback：大头针跳动动画结束时回调

实现思路

场景：大头针选择位置并显示弹窗组件

通过原生组件组合实现大头针图标源码参考。

  RelativeContainer() {
    Column()
      ...
      .zIndex(0)
      .alignRules({
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      .id('invisiblePost')
    Column()
      ...
      .alignRules({
        bottom: { anchor: 'invisiblePost', align: VerticalAlign.Top },
        middle: { anchor: 'invisiblePost', align: HorizontalAlign.Center }
      })
      .id('tackPost')
    Button()
      ...
      .alignRules({
        center: { anchor: 'tackPost', align: VerticalAlign.Top },
        middle: { anchor: 'tackPost', align: HorizontalAlign.Center }
      })
    if ((this.thumbTackState === ThumbTackState.LOADING)) {
      Button()
        ...
        .id('little1Circle')
        .zIndex(this.whiteHatZIdx)
        .alignRules({
          center: { anchor: 'tackPost', align: VerticalAlign.Top },
          middle: { anchor: 'tackPost', align: HorizontalAlign.Center }
        })
    }
  }

通过@ohos.animator控制大头针的波纹动画及跳动动画源码参考。

 // 跳动动画
  createVerticalPostAnimation() {
    this.postOffsetAnimator = animator.create({
      // 100, 大头针针尖位置偏移动画持续时间100ms
      duration: 100,
      easing: 'fast-out-slow-in',
      // 200, 动画延时200ms执行
      delay: 200,
      fill: 'forwards',
      direction: 'alternate',
      iterations: 2,
      begin: 0,
      end: this.thumbTackWidth * ThumbTackCommonConstants.TACK_POST_ANIMATION_OFFSET_RATIO
    })

    ...
    
    this.postOffsetAnimator.onFrame = (value) => {
      this.tackPostOffset = value;
    }
    this.postHeightAnimator = animator.create({
      // 大头针针柄长度动画持续200ms
      duration: 200,
      easing: 'fast-out-slow-in',
      delay: 0,
      fill: 'forwards',
      direction: 'alternate',
      iterations: 2,
      begin: this.thumbTackWidth * ThumbTackCommonConstants.TACK_POST_HEIGHT_RATIO,
      end: this.thumbTackWidth * ThumbTackCommonConstants.TACK_POST_ANIMATION_HEIGHT_RATIO
    })
    
    ...
    
    this.postHeightAnimator.onFrame = (value) => {
      this.tackPostHeight = value;
    }
  }

通过Path实现地址提示区域的不规则边框，源码参考。

  // this.pathCmd = 'M0 0 C' + vp2px(2.5) + ' ' + vp2px(0) + ' ' + vp2px(5.6) + ' ' + vp2px(2.4) + ' '
  //  + vp2px(6.2) + ' ' + vp2px(4.9) + ' L' + vp2px(10) + ' ' + vp2px(20) + ' L0 ' + vp2px(20) + 'Z';
  Path({
    width: AddressPopupCommonConstants.TIP_AREA_HEIGHT,
    height: AddressPopupCommonConstants.TIP_AREA_HEIGHT,
    commands: this.pathCmd
  })
    .fill(this.addressTipBackgroundColor)
    .strokeOpacity(0)

高性能知识点

无

工程结构&模块类型

   mapthumbtack                                // har类型
   |---src/main/ets/components
   |   |---LocationAndPopupComponent.ets       // 视图层-大头针选择位置并显示弹窗组件 
   |   |---AddressPopUpComponent.ets           // 视图层-依赖的地址显示组件 
   |   |---ThumbTackComponent.ets              // 视图层-依赖的大头针组件 
   |---src/main/ets/model
   |   |---CommonConstants.ets                 // 模型层-通用常量

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
点赞，转发，有你们的『点赞和评论』，才是我创造的动力。
关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
想要获取更多完整鸿蒙最新学习知识点，请移步前往小编：https://gitee.com/MNxiaona/733GH/blob/master/jianshu