如何在 Google Maps Android SDK 的折线上添加形状

Posted 2023-03-28

【中文标题】如何在 Google Maps Android SDK 的折线上添加形状

【英文标题】：How to add shape on top of polylines in Google Maps Android SDK

【发布时间】：2021-10-08 20:09:12

【问题描述】：

我有一个应用程序，其中包含使用 Google Maps android SDK 和 Polyline 和 PolylineOptions 类在源点和目标点之间绘制折线的代码。

我的问题是如何添加一个小形状 - 例如，从源指向目标的箭头，绘制在折线的顶部 - 以便通过缩放和旋转地图 UI 来改变它的方向和角度，很像流行导航应用中的标准箭头？

任何帮助将不胜感激。

【参考方案1】：

无论如何，您可以创建基于MapView- 或MapFragment- 的自定义视图并绘制您想要的任何内容（如this 答案）。在这种情况下，您需要直接在自定义视图画布上绘制折线，而不是通过使用 Google 地图Polyline。 如果你想在你需要的路径段的中间画一个箭头：

使用例如SphericalUtilMaps SDK for Android Utility Library类的computeHeading()方法来确定方向；

确定路径段的中间，例如通过SphericalUtil类的interpolate()方法：

LatLng middle = interpolate(from, to, 0.5);

如果您想沿所有折线绘制小箭头，您可以使用Paint 类的setPathEffect() 方法自定义线条样式。为此，您应该为“箭头图章”（以像素为单位）创建路径，该路径将重复每个“前进”（也以像素为单位） - 完全像 this 中的“钻石”示例：

    mPathDiamondStamp = new Path();
    mPathDiamondStamp.moveTo(-DIAMOND_WIDTH / 2, 0);
    mPathDiamondStamp.lineTo(0, DIAMOND_HEIGHT / 2);
    mPathDiamondStamp.lineTo(DIAMOND_WIDTH / 2, 0);
    mPathDiamondStamp.lineTo(0, -DIAMOND_HEIGHT / 2);
    mPathDiamondStamp.close();

    mPathDiamondStamp.moveTo(-DIAMOND_WIDTH / 2 + DIAMOND_BORDER_WIDTH, 0);
    mPathDiamondStamp.lineTo(0, -DIAMOND_HEIGHT / 2 + DIAMOND_BORDER_WIDTH / 2);
    mPathDiamondStamp.lineTo(DIAMOND_WIDTH / 2 - DIAMOND_BORDER_WIDTH, 0);
    mPathDiamondStamp.lineTo(0, DIAMOND_HEIGHT / 2 - DIAMOND_BORDER_WIDTH / 2);
    mPathDiamondStamp.close();

    mPathDiamondStamp.setFillType(Path.FillType.EVEN_ODD);

    mDiamondPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mDiamondPaint.setColor(Color.BLUE);
    mDiamondPaint.setStrokeWidth(2);
    mDiamondPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mDiamondPaint.setStyle(Paint.Style.STROKE);
    mDiamondPaint.setPathEffect(new PathDashPathEffect(mPathDiamondStamp, DIAMOND_ADVANCE, DIAMOND_PHASE, PathDashPathEffect.Style.ROTATE));

在这种情况下，所有“通过缩放和旋转地图 UI 来改变方向和角度”的工作都可以处理 Paint 类“从盒子里”为你做 - 你只需要设置“印章”模式和印章之间的间隔.

要将LatLng 坐标转换为屏幕坐标，您可以使用Projection 类的toScreenLocation()。因此，根据MapView 或SupportMapFragment 制作自定义视图，并使用Canvas 和Paint 绘制您想要的任何内容。

Here 和 there 您还可以找到 setPathEffect() 用法的好例子。