首页 > 解决方案 > 如何在地图标记(汽车)周围放置进度条

问题描述

在此处输入图像描述

我正在寻找像这张图片一样围绕谷歌地图标记制作进度条,或者我将如何在地图上显示具有特定位置的进度条,就像我告诉纬度和经度并显示该位置一样

标签: javaandroidxmlgoogle-mapskotlin

解决方案


在这个短片中,进度标记(标记周围的一系列 8 个圆圈)前进一个表示进度的实心圆圈 - 基于任何进度计算需要(在这种情况下,5 个位置更新,但很可能是距离完成)。

标记图标是整个东西(汽车 + 加标记针 + 进度圈),图标在 9 个文件中重复,进度圈发生了变化。

如果感兴趣,我可以发布详细信息,但摘要是:

  • 创建与进度状态一样多的标记图像(本例中为 9 个)
  • 通过更改与进度对应的标记图标来定期更新进度(在本示例中以 1/8 为增量)
  • 闪烁是使用处理程序延迟完成的,并且基本上在 icon0(没有填充圆圈)和当前图标(基于进度计算)之间切换。
  • 在本例中,标记随位置一起移动,只需使用.setPosition()

这是所提供示例的处理程序实现:

final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
 boolean onOff = false;
 @Override
 public void run() {
     // imageId is set in the onLocationChanged based on 'progress'
     // determination - 0/8 complete; 1/8 complete...
     int currentImageId = imageId;

     // icons is an array list populated at initialization with 
     // BitmapDescriptors from resources - one for each progress
     // fraction (0 - 8).
     BitmapDescriptor currentIcon = icons.get(currentImageId);

     // Flashing results from using the "0-progress" indicator icon
     // which is at index 0.
     BitmapDescriptor offIcon = icons.get(0);

     if (onOff) {
         marker1.setIcon(offIcon);
     } else {
         marker1.setIcon(currentIcon);
     }
     onOff = !onOff;

     // restart handler timer.
     handler.postDelayed(this, 500);
 }
}, 100);

图标列表的初始化如下:

// repeat for all progress images
final BitmapDescriptor icon0 = BitmapDescriptorFactory.fromResource(R.drawable.car0);

// and add to list
final ArrayList<BitmapDescriptor> icons = new ArrayList<>();
// repeat for all progress images
icons.add(icon0);

定制出现在“进度确定”中 - 如果沿着路线行驶,则在onLocationChanged路径中计算完整比率并将其应用于最大数量的图像以产生上述imageId。如:

int imageId = pathCompleteRatio * maxImages;

视频 在此处输入图像描述


推荐阅读