如何在Google地图中表示路线的方向？

Question

在一个项目中，我正在显示使用PolylineOptions的路线，以绘制从一个POI到下一个POI的矩形。

在每个POI中我都画了一个圆。

目标是以某种方式表示路线的方向，例如，在每个PolylineOptions矩形的中间绘制一个箭头。问题是我找不到方法。

这是我的代码：

    PolylineOptions rectOptions = new PolylineOptions();
    float[] prevHSV = new float[3];
    Color.colorToHSV(getResources().getColor(R.color.colorPrimary), prevHSV);
    rectOptions.color(Color.HSVToColor(255, prevHSV));

    String[][] routeInformation = ((MyApplication)getApplication()).getLineInformation(line);
    ArrayList<Double[]> routeStops = Util.getFullRouteFromLine(this, line);
    final LatLngBounds.Builder builder = new LatLngBounds.Builder();

    for (int i=0; i<routeInformation.length; i++){
        LatLng latlng = new LatLng(Double.parseDouble(routeInformation[i][0]),Double.parseDouble(routeInformation[i][1]));
        builder.include(latlng);
        mMap.addCircle(new CircleOptions().center(latlng).radius(15).strokeColor(Color.HSVToColor(255, prevHSV)).fillColor(Color.HSVToColor(255, prevHSV)).zIndex(7777));            
    }

    for (Double[] pos : routeStops){
        rectOptions.add(new LatLng(pos[0],pos[1])).width(5);
    }
    mMap.addPolyline(rectOptions);

是否有一种简单的方法来表示路线的方向？

与此类似，但这是针对Google地图的网络版本，而不是针对Android版本：http://jsfiddle.net/nX8U8/2/

Answer 1

恕我直言，最简单的方法是使用扁平的“朝北”方向标记（箭头），如下所示：

通过矢量可绘制ic_arrow_up.xml创建：

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportHeight="560"
    android:viewportWidth="560"
    android:height="24dp"
    android:width="24dp"
    >
    <path android:fillColor="#0000FF"
        android:pathData="M0,559.43C0,557.943 279.994,-0.561 280.458,0C282.014,1.884 560.512,559.569 559.999,559.776C559.665,559.911 496.562,532.823 419.77,499.581C419.77,499.581 280.15,439.14 280.15,439.14C280.15,439.14 140.756,499.57 140.756,499.57C64.089,532.807 1.056,560 0.681,560C0.307,560 0,559.743 0,559.43C0,559.43 0,559.43 0,559.43Z"
    />
</vector>

放置在每个路径上的折线段中间点，并根据段方位计算角度。您可以通过SphericalUtil的Google Maps Android API Utility Library 类来确定折线的中间和方位。可以通过SphericalUtil.computeHeading()来找到方位，将线段的第一和第二点作为参数，将线段中间点的LatLng-通过SphericalUtil.interpolate()还将线段的第一点和第二点作为参数{{1} }和from，并将常数0.5（一半）作为to参数。

因此，使用这样的来源：

fraction

您会得到类似的东西：

还可以通过设置

中... @Override public void onMapReady(GoogleMap googleMap) { mGoogleMap = googleMap; mGoogleMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() { @Override public void onMapLoaded() { List<LatLng> sourcePoints = new ArrayList<>(); PolylineOptions polyLineOptions; sourcePoints.add(new LatLng(-35.27801,149.12958)); sourcePoints.add(new LatLng(-35.28032,149.12907)); sourcePoints.add(new LatLng(-35.28099,149.12929)); sourcePoints.add(new LatLng(-35.28144,149.12984)); sourcePoints.add(new LatLng(-35.28194,149.13003)); sourcePoints.add(new LatLng(-35.28282,149.12956)); sourcePoints.add(new LatLng(-35.28302,149.12881)); sourcePoints.add(new LatLng(-35.28473,149.12836)); polyLineOptions = new PolylineOptions(); polyLineOptions.addAll(sourcePoints); polyLineOptions.width(10); polyLineOptions.color(Color.BLUE); mGoogleMap.addPolyline(polyLineOptions); mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(sourcePoints.get(0), 15)); for (int i = 0; i < sourcePoints.size() - 1; i++) { // get first and second points of polyline segment LatLng segmentP1 = sourcePoints.get(i); LatLng segmentP2 = sourcePoints.get(i+1); // calculate middle point LatLng segmentMiddlePoint = SphericalUtil.interpolate(segmentP1, segmentP2, 0.5); // calculate bearing float segmentBearing = (float) SphericalUtil.computeHeading(segmentP1, segmentP2); // add flat marker at segment middle addDirectionMarker(segmentMiddlePoint, segmentBearing); } }); } ... public void addDirectionMarker(LatLng latLng, float angle) { Drawable circleDrawable = ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_arrow_up); BitmapDescriptor markerIcon = getMarkerIconFromDrawable(circleDrawable, 30, 30); mGoogleMap.addMarker(new MarkerOptions() .position(latLng) .anchor(0.5f, 0.5f) .rotation(angle) .flat(true) .icon(markerIcon) ); } 以外的其他值来更改箭头标记的大小。

30, 30

行。