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

Posted 2023-05-07

【中文标题】如何在谷歌地图中表示路线中的方向？

【英文标题】：How to represent direction in a route in google maps?

【发布时间】：2019-08-25 08:33:06

【问题描述】：

在一个项目中，我使用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 maps 的 web 版本，不适用于 android 版本：http://jsfiddle.net/nX8U8/2/

【参考方案1】：

恕我直言，最简单的方法是像这样使用扁平的“北向”方向标记（箭头）：

通过矢量绘图创建ic_arrow_up.xml:

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportHeight="560"
    android:viewportWidth="560"
    android:
    android:
    >
    <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() 也可以通过from 和to 和常数0.5 （一半）作为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 之外的其他值来更改箭头标记的大小

BitmapDescriptor markerIcon = getMarkerIconFromDrawable(circleDrawable, 30, 30);

行。