Google地图：如何在每个PolylineOptions矩形的中间绘制箭头？

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);

Answer 1

最简单的方法是使用朝北的标记（这很重要，因为标记的旋转角度是从北方开始的）箭头（例如）-将其放置在当前折线段rotate的中间并根据方向将其属性anchor()属性设置为(0.5,0.5)，并将flat属性设置为true。像这样：

 ...
 // place first point of route (direction can't be calculated for it)
 LatLng prevLatLng = new LatLng(Double.parseDouble(routeInformation[0][0]),Double.parseDouble(routeInformation[0][1]));
 builder.include(prevLatLng);
 mMap.addCircle(new CircleOptions().center(prevLatLng).radius(15).strokeColor(Color.HSVToColor(255, prevHSV)).fillColor(Color.HSVToColor(255, prevHSV)).zIndex(7777));       

 // place other points
 for (int i=1; 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));

    // determine middle of segment
    LatLng middleLatLng = getMiddlePoint(prevLatLng, latlng);

    // determine direction
    float direction = bearingBetweenLocations(prevLatLng, latlng);

    // add marker with arrow      
    mMap.addMarker(new MarkerOptions()
    .position(middleLatLng)
    .anchor(0.5,0.5)
    .rotation(direction)
    .flat(true));       

    // move previous position to current
    prevLatLng = latlng;
}
...

折线段的中点可以找到虱子的边界中心：

private LatLng getMiddlePoint(LatLng latlng1, LatLng latlng2) {
    LatLngBounds.Builder builder = new LatLngBounds.Builder();
    builder.include(latlng1);
    builder.include(latlng2);  
    LatLngBounds bounds = builder.build();
    return bounds.getCenter();
}

或与SphericalUtil.interpolate(LatLng from, LatLng to, double fraction)中的Google Maps Android API Utility Library：

LatLng middleLatLng = SphericalUtil.interpolate(prevLatLng, latlng, 0.5);

可以在两个相邻的路线点上确定方向，例如this的satti8893答案：

private double bearingBetweenLocations(LatLng latLng1,LatLng latLng2) {

    double PI = 3.14159;
    double lat1 = latLng1.latitude * PI / 180;
    double long1 = latLng1.longitude * PI / 180;
    double lat2 = latLng2.latitude * PI / 180;
    double long2 = latLng2.longitude * PI / 180;

    double dLon = (long2 - long1);

    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.atan2(y, x);

    brng = Math.toDegrees(brng);
    brng = (brng + 360) % 360;

    return brng;
}

NB！这不是完整的代码，只是一个主意。

还要看看this的Scorpion问题。

另一种方法是创建基于MapView的自定义视图，并在覆盖的dispatchDraw()中手动绘制带有圆圈和箭头的整个路径。