在Google地图中绘制ARC折线 [英] Draw ARC Polyline in Google Map

问题描述

如何在Google地图中绘制Arc Polyline？

我已经使用

正如你在上面看到的图像，我们非常接近我们的目标，但不知道为什么它不与另一个终点连接

2。如果我使用this.showCurvedPolyline（latLng1，latLng2，1）;然后得到：

3。如果我使用LatLng c = SphericalUtil.computeOffset（p，x，h - 90.0）;然后得到：

注意：我不想要这么多大圆形，真的我不想那么多 height 。

以下是我想要一个ARC形状，如下图所示：

以下是 CODE 我用于在两个<$之间添加曲线折线 c $ c> geo-locatios ：

  private void addCurvedPolyLine（）{
 
 LatLng latLng1 =新LatLng（40.7128，74.0059）; //纽约
 LatLng latLng2 =新LatLng（51.5074,0.1278）; // London 
 
 Marker marker1 = mMap.addMarker（new MarkerOptions（）。position（latLng1）.title（Start））; 
 Marker marker2 = mMap.addMarker（new MarkerOptions（）。position（latLng2）.title（End））; 
 
 LatLngBounds.Builder builder = new LatLngBounds.Builder（）; 
 
 builder.include（marker1.getPosition（））; 
 builder.include（marker2.getPosition（））; 
 
 LatLngBounds bounds = builder.build（）; 
 int padding = 0; //以像素为单位偏移地图边缘
 CameraUpdate cu = CameraUpdateFactory.newLatLngBounds（bounds，padding）; 
 mMap.moveCamera（cu）; 
 mMap.animateCamera（cu）; 
 
 this.showCurvedPolyline（latLng1，latLng2，0.1）; 
 
 
 
 
解决方案

我建议在

我希望这有助于！

How Can I Draw Arc Polyline in Google Map ?

I already used this code to create curved Polyline.

Here is the method to draw curved Polyline:

private void showCurvedPolyline (LatLng p1, LatLng p2, double k) {
    //Calculate distance and heading between two points
    double d = SphericalUtil.computeDistanceBetween(p1,p2);
    double h = SphericalUtil.computeHeading(p1, p2);

    //Midpoint position
    LatLng p = SphericalUtil.computeOffset(p1, d*0.5, h);

    //Apply some mathematics to calculate position of the circle center
    double x = (1-k*k)*d*0.5/(2*k);
    double r = (1+k*k)*d*0.5/(2*k);

    LatLng c = SphericalUtil.computeOffset(p, x, h + 90.0);

    //Polyline options
    PolylineOptions options = new PolylineOptions();
    List<PatternItem> pattern = Arrays.<PatternItem>asList(new Dash(30), new Gap(20));

    //Calculate heading between circle center and two points
    double h1 = SphericalUtil.computeHeading(c, p1);
    double h2 = SphericalUtil.computeHeading(c, p2);

    //Calculate positions of points on circle border and add them to polyline options
    int numpoints = 100;
    double step = (h2 -h1) / numpoints;

    for (int i=0; i < numpoints; i++) {
        LatLng pi = SphericalUtil.computeOffset(c, r, h1 + i * step);
        options.add(pi);
    }

    //Draw polyline
    mMap.addPolyline(options.width(10).color(Color.MAGENTA).geodesic(false).pattern(pattern));
}

OUTPUT

1. If I am using this.showCurvedPolyline(latLng1, latLng2, 0.1); then getting:

As you can see in above image, we are very close to get our target, but don't know why it's not connecting with another end point

2. If I am using this.showCurvedPolyline(latLng1, latLng2, 1); then getting:

3. If I am using LatLng c = SphericalUtil.computeOffset(p, x, h - 90.0); then getting:

Note: I don't want this much big circle shape, really I don't want that much height.

Here is what I want an ARC Shape as shown in below image

Here is the CODE I am using to add curved Polyline between two geo-locatios :

private void addCurvedPolyLine() {

        LatLng latLng1 = new LatLng(40.7128, 74.0059); // New York
        LatLng latLng2 = new LatLng(51.5074, 0.1278); // London

        Marker marker1 = mMap.addMarker(new MarkerOptions().position(latLng1).title("Start"));
        Marker marker2 = mMap.addMarker(new MarkerOptions().position(latLng2).title("End"));

        LatLngBounds.Builder builder = new LatLngBounds.Builder();

        builder.include(marker1.getPosition());
        builder.include(marker2.getPosition());

        LatLngBounds bounds = builder.build();
        int padding = 0; // offset from edges of the map in pixels
        CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, padding);
        mMap.moveCamera(cu);
        mMap.animateCamera(cu);

        this.showCurvedPolyline(latLng1, latLng2, 0.1);

    }

解决方案

The solution that I proposed in another question was focused on curved polylines for really small distances. For example, when you have a Directions API route where the start and end points are snapped to road, but the real start and end points in original request were the positions of buildings, so you can connect the road and building with this curved dashed polyline.

In case of big distances like in your example, I believe you can just use a geodesic polylines that are available in the API. You can set geodesic property of polyline options to true.

public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    mMap.getUiSettings().setZoomControlsEnabled(true);

    LatLng latLng1 = new LatLng(40.7128, 74.0059); // New York
    LatLng latLng2 = new LatLng(51.5074, 0.1278); // London

    Marker marker1 = mMap.addMarker(new MarkerOptions().position(latLng1).title("Start"));
    Marker marker2 = mMap.addMarker(new MarkerOptions().position(latLng2).title("End"));

    List<PatternItem> pattern = Arrays.<PatternItem>asList(new Dash(30), new Gap(20));
    PolylineOptions popt = new PolylineOptions().add(latLng1).add(latLng2)
       .width(10).color(Color.MAGENTA).pattern(pattern)
       .geodesic(true);
    mMap.addPolyline(popt);

    LatLngBounds.Builder builder = new LatLngBounds.Builder();

    builder.include(marker1.getPosition());
    builder.include(marker2.getPosition());

    LatLngBounds bounds = builder.build();
    int padding = 150; // offset from edges of the map in pixels
    CameraUpdate cu = CameraUpdateFactory.newLatLngBounds(bounds, padding);
    mMap.moveCamera(cu);
    mMap.animateCamera(cu);
}  

The resulting polyline is shown in my screenshot

I hope this helps!

这篇关于在Google地图中绘制ARC折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！