Question

我需要为

添加什么

PolylineOptions polyline = new PolylineOptions();
polyline.addAll(geom);
polyline.color(defaultStrokeColor).width(defaultWidth);
mapObjects.add(polyline);

此代码显示箭头？

Answer 1

我已经看到了其他有关这方面的问题/答案，使用标记并旋转它们。但是有一种更简单的方法可以在GoogleMap Polylines上设置方向箭头。

GoogleMap API v2通过向PolylineOptions添加“ endcap ”图标，提供了一种灵活的方法。它采用输入位图图标并沿折线方向旋转。没有箭头所需的标记。图标旋转是自动的。只要原始箭头图标指向“向上”。

坦率地说，我很惊讶没有 ArrowCap 类。这些类确实存在：Flexbox，ButtCap，RoundCap，但不存在ArrowCap类。

所以我们需要用我们自己的箭头图像来展开它。唯一的小问题是Polyline（和下一个连接的Polyline）使用图标的CENTER作为端点。因此，请确保您的endcap图标位于图像的中心位置。

我在此处制作并上传了示例箭头图标图片：＆lt; SquareCap＆gt;

很抱歉它是白色的并且看起来不可见，但它位于＆lt;之间。＆GT;符号，只需将其拖到桌面即可。

我希望能够以编程方式更改箭头颜色，以便创建此白色PNG图像，然后使用滤镜将颜色叠加（MULTIPLY）到其上。

图标是一个白色箭头，朝上，图像的中心点。图像的上半部分为空（透明）。您将需要使用（或您最喜欢的图像工具）为这些分辨率创建mipmap图像：mdpi = 24x24，hdpi = 36x36，xhdpi = 48x48，xxhdpi = 72x72，xxxhdpi = 96x96。

以下是生成Polyline / PolylineOptions所需的endcap BitmapDescriptor的代码（R.mipmap.endcap是我上面包含的图片）：

/**
 * Return a BitmapDescriptor of an arrow endcap icon for the passed color.
 * 
 * @param context - a valid context object
 * @param color - the color to make the arrow icon
 * @return BitmapDescriptor - the new endcap icon
 */
public BitmapDescriptor getEndCapIcon(Context context,  int color) {

    // mipmap icon - white arrow, pointing up, with point at center of image
    // you will want to create:  mdpi=24x24, hdpi=36x36, xhdpi=48x48, xxhdpi=72x72, xxxhdpi=96x96
    Drawable drawable = ContextCompat.getDrawable(context, R.mipmap.endcap);

    // set the bounds to the whole image (may not be necessary ...)
    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

    // overlay (multiply) your color over the white icon
    drawable.setColorFilter(color, PorterDuff.Mode.MULTIPLY);

    // create a bitmap from the drawable
    android.graphics.Bitmap bitmap = android.graphics.Bitmap.createBitmap(drawable.getIntrinsicWidth(),
            drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);

    // render the bitmap on a blank canvas
    Canvas canvas = new Canvas(bitmap);
    drawable.draw(canvas);

    // create a BitmapDescriptor from the new bitmap
    return BitmapDescriptorFactory.fromBitmap(bitmap);
}

以下是使用指向折线方向的箭头端盖创建折线的代码：

/**
 * Draw a GoogleMap Polyline with an endcap arrow between the 2 locations.
 *
 * @param context - a valid context object
 * @param googleMap - a valid googleMap object
 * @param fromLatLng - the starting position
 * @param toLatLng - the ending position
 * @return Polyline - the new Polyline object
 */
public Polyline drawPolylineWithArrowEndcap(Context context,
                                            GoogleMap googleMap,
                                            LatLng fromLatLng,
                                            LatLng toLatLng) {

    int arrowColor = Color.RED; // change this if you want another color (Color.BLUE)
    int lineColor = Color.RED;

    BitmapDescriptor endCapIcon = getEndCapIcon(context,arrowColor);

    // have googleMap create the line with the arrow endcap
    // NOTE:  the API will rotate the arrow image in the direction of the line
    Polyline polyline = googleMap.addPolyline(new PolylineOptions()
            .geodesic(true)
            .color(lineColor)
            .width(8)
            .startCap(new RoundCap())
            .endCap(new CustomCap(endCapIcon,8))
            .jointType(JointType.ROUND)
            .add(fromLatLng, toLatLng);

    return polyline;
}

Answer 2

我找到了解决方案，它正在为我工作

PolylineOptions polyline = new PolylineOptions();
polyline.addAll(geom);
polyline.color(defaultStrokeColor).width(defaultWidth);
mapObjects.add(polyline);
double lat1 = geom.get(0).latitude;
                    double lng1 = geom.get(0).longitude;

                    // destination
                    double lat2 = geom.get(1).latitude;
                    double lng2 = geom.get(1).longitude;

                    //midpoint 
                    double lat = (lat1 + lat2)/2;
                    double lng = (lng1 + lng2)/2;

                    double dLon = (lng2-lng1);
                    double y = Math.sin(dLon) * Math.cos(lat2);
                    double x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
                    double brng = Math.toDegrees((Math.atan2(y, x)));

现在在结束点添加一个标记（箭头位图）

MarkerOptions marker = new MarkerOptions().position(geom.get(0));
                    marker.anchor(0.5f, 0.5f);
                    marker.icon(BitmapDescriptorFactory.fromBitmap(bstyle));
                    marker.rotation((float) brng);
                    marker.flat(true);

Answer 3

以下代码对行尾应用圆角帽，并根据折线的类型（即来自可绘制资源文件的箭头图像）使用不同的起始帽，其中类型是存储在数据对象中的任意属性。折线。该示例还指定了笔触宽度，笔触颜色和关节类型：

switch (type) {
    // If no type is given, allow the API to use the default.
    case "A":
        // Use a custom bitmap as the cap at the start of the line.
        polyline.setStartCap(
                new CustomCap(
                        BitmapDescriptorFactory.fromResource(R.drawable.ic_arrow), 10));
        break;
    case "B":
        // Use a round cap at the start of the line.
        polyline.setStartCap(new RoundCap());
        break;
}

polyline.setEndCap(new RoundCap());
polyline.setWidth(POLYLINE_STROKE_WIDTH_PX);
polyline.setColor(COLOR_BLACK_ARGB);
polyline.setJointType(JointType.ROUND);

}

如何在android中为我的折线创建方向箭头

3 个答案: