logo标签列表

像Uber Android一样在地图上旋转标记和移动动画

javaandroidxml
63

我正在开发一个类似于UBER、Lyft或OLA的项目，即在主页上显示可用移动汽车的地图。 我正在寻找一种库，可以使汽车平稳地移动并顺利转弯，就像UBER一样。 目前，我能够使用以下代码将汽车平稳地从一个纬度-经度位置移动到另一个位置。 但是棘手的部分是转弯并确保汽车在移动到方向时面朝前方。

平稳移动汽车代码：

    final LatLng SomePos = new LatLng(12.7796354, 77.4159606);

    try {
        if (googleMap == null) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
                googleMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();
            }
        }
        googleMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
        googleMap.setMyLocationEnabled(true);
        googleMap.setTrafficEnabled(false);
        googleMap.setIndoorEnabled(false);
        googleMap.setBuildingsEnabled(true);
        googleMap.getUiSettings().setZoomControlsEnabled(true);
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(SomePos));
        googleMap.moveCamera(CameraUpdateFactory.newCameraPosition(new CameraPosition.Builder()
                .target(googleMap.getCameraPosition().target)
                .zoom(17)
                .bearing(30)
                .tilt(45)
                .build()));

        myMarker = googleMap.addMarker(new MarkerOptions()
                .position(SomePos)
                .icon(BitmapDescriptorFactory.fromResource(R.mipmap.ic_launcher))
                .title("Hello world"));


        googleMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker arg0) {

                final LatLng startPosition = myMarker.getPosition();
                final LatLng finalPosition = new LatLng(12.7801569, 77.4148528);
                final Handler handler = new Handler();
                final long start = SystemClock.uptimeMillis();
                final Interpolator interpolator = new AccelerateDecelerateInterpolator();
                final float durationInMs = 3000;
                final boolean hideMarker = false;

                handler.post(new Runnable() {
                    long elapsed;
                    float t;
                    float v;

                    @Override
                    public void run() {
                        // Calculate progress using interpolator
                        elapsed = SystemClock.uptimeMillis() - start;
                        t = elapsed / durationInMs;

                        LatLng currentPosition = new LatLng(
                                startPosition.latitude * (1 - t) + finalPosition.latitude * t,
                                startPosition.longitude * (1 - t) + finalPosition.longitude * t);

                        myMarker.setPosition(currentPosition);

                        // Repeat till progress is complete.
                        if (t < 1) {
                            // Post again 16ms later.
                            handler.postDelayed(this, 16);
                        } else {
                            if (hideMarker) {
                                myMarker.setVisible(false);
                            } else {
                                myMarker.setVisible(true);
                            }
                        }
                    }
                });

                return true;

            }

        });

    } catch (Exception e) {
        e.printStackTrace();
    }
1
你解决了你的问题吗？我需要帮助。 - mdDroid
3
还没有，但非常接近了...很快会在这里更新。我发现没有人能够帮助我，所以这需要一点时间。：\ - VipiN Negi
你的代码中哪一行实际上移动了地图上的标记？ - chandramohan
myMarker.setPosition(currentPosition); 这行代码可以移动标记，但如果要在地图上更新，您需要编写额外的代码。 - VipiN Negi
6个回答
60

我最近遇到了相同的用例，以下是我的解决方案。

首先，我想感谢@VipiN分享的“平稳移动车辆代码”，它能够很顺利地运行。

第二部分是将汽车标记放置在正确的方向并根据转弯进行旋转。为实现此目的，我计算了两个连续点之间（即从设备/服务器接收到的位置更新）的方位或航向角度。这个链接将帮助您理解其数学原理。

下面的代码将为您提供两个位置之间的方位角：

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

最后，我们需要按照上述方法得到的角度旋转汽车标记。
private void rotateMarker(final Marker marker, final float toRotation) {
    if(!isMarkerRotating) {
        final Handler handler = new Handler();
        final long start = SystemClock.uptimeMillis();
        final float startRotation = marker.getRotation();
        final long duration = 1000;

        final Interpolator interpolator = new LinearInterpolator();

        handler.post(new Runnable() {
            @Override
            public void run() {
                isMarkerRotating = true;

                long elapsed = SystemClock.uptimeMillis() - start;
                float t = interpolator.getInterpolation((float) elapsed / duration);

                float rot = t * toRotation + (1 - t) * startRotation;

                marker.setRotation(-rot > 180 ? rot / 2 : rot);
                if (t < 1.0) {
                    // Post again 16ms later.
                    handler.postDelayed(this, 16);
                } else {
                    isMarkerRotating = false;
                }
            }
        });
    }
}

干杯！

1
完美的解决方案。+1。只需要将锚点设置为标记(0.5f,0.5f)。干得好@Prasad。 - Abhishek Pachal
2
@Prasad 何时何地调用rotateMarker函数？ - Vilas
2
Prasad如何在哪里调用rotateMarker函数，以及final float toRotation的值是多少？ - Naveen Kumar M
2
非常感谢Prasad。它运行得很好，但是当汽车停下来时，标记会旋转到另一个方向。当汽车重新开始移动时，它又会回到正确的方向。我们该如何解决这个问题？ - Rahul Hawge
汽车标记正在更新到新位置，但它在闪烁和更新时出现了卡顿，没有平稳移动？ - Nabin Dhakal
显示剩余4条评论
20
以下是我将要翻译的内容：

这是我用来像 Uber 一样移动标记的代码。我展示了两种移动标记的方式。

重要提示：要在正确的道路上移动汽车 [像 Ola、Uber 那样]，您需要使用 Google 提供的路线 API

1.通过静态纬度和经度

2.通过实时纬度和经度

package com.gangsofcoder.googlemapdemo;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.location.Location;
import android.location.LocationManager;
import android.os.Bundle;
import android.os.Handler;
import android.os.PersistableBundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.animation.LinearInterpolator;
import android.widget.Button;
import android.widget.Toast;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.loopj.android.http.AsyncHttpResponseHandler;
import com.loopj.android.http.RequestParams;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;

import cz.msebera.android.httpclient.Header;

public class MoveCar extends AppCompatActivity {
    private GoogleMap googleMap;
    SupportMapFragment mapFragment;
    Marker marker;
    private boolean isMarkerRotating = false;
    ArrayList<LatLng> listOfPoints = new ArrayList<>();
    int currentPt = 0;
    LatLng finalPosition;
    Marker mMarker;

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    setUpMapIfNeeded();
    //new location details
    listOfPoints.add(new LatLng(30.701623, 76.684220));
    listOfPoints.add(new LatLng(30.702486, 76.685487));
    listOfPoints.add(new LatLng(30.703135, 76.684891));
    listOfPoints.add(new LatLng(30.703256, 76.685000));
    listOfPoints.add(new LatLng(30.703883, 76.685941));
    listOfPoints.add(new LatLng(30.703413, 76.685190));
}

private void setUpMapIfNeeded() {
    if (mapFragment == null) {
        mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);

        if (mapFragment != null) {
            mapFragment.getMapAsync(new OnMapReadyCallback() {
                @Override
                public void onMapReady(GoogleMap googleMap) {
                    loadMap(googleMap);
                }
            });
        }
    }
}

private void loadMap(GoogleMap map) {
    googleMap = map;

    mMarker = googleMap.addMarker(new MarkerOptions().position(new LatLng(30.701623, 76.684220)).icon(BitmapDescriptorFactory.fromResource(R.drawable.icon_car)));      


    final Handler handler = new Handler();
    //Code to move car along static latitude and longitude

  /*  handler.postDelayed(new Runnable() {
        @Override
        public void run() {

            if (currentPt < listOfPoints.size()) {
                //post again
                Log.d("tess", "inside run ");
                Location targetLocation = new Location(LocationManager.GPS_PROVIDER);
                targetLocation.setLatitude(listOfPoints.get(currentPt).latitude);
                targetLocation.setLongitude(listOfPoints.get(currentPt).longitude);
                animateMarkerNew(targetLocation, mMarker);
                handler.postDelayed(this, 3000);
                currentPt++;
            } else {
                Log.d("tess", "call back removed");
                //removed callbacks
                handler.removeCallbacks(this);
            }
        }
    }, 3000);*/

    //Here move marker along real time updates
    final RequestParams params = new RequestParams();
    params.put("source_lattitude", "lat");
    params.put("source_longitude", "long");
    params.put("date", "date");

    //new handler
    handler.postDelayed(new Runnable() {
        @Override
        public void run() {

            LoopjHttpClient.post(getString(R.string.default_upload_website), params, new AsyncHttpResponseHandler() {
                @Override
                public void onSuccess(int statusCode, Header[] headers, byte[] responseBody) {

                    try {
                        JSONObject jsonObject = new JSONObject(new String(responseBody));
                        String status = jsonObject.getString("status");
                        String text = jsonObject.getString("text");
                        //reading json array
                        JSONArray jsonArray = jsonObject.getJSONArray("result");
                        String source = jsonArray.getJSONObject(0).getString("source");

                        String[] latLong = source.split(",");
                        Location location = new Location(LocationManager.GPS_PROVIDER);
                        location.setLatitude(Double.parseDouble(latLong[0]));
                        location.setLongitude(Double.parseDouble(latLong[1]));
                        //calling method to animate marker  
                        animateMarkerNew(location, mMarker);
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                }

                @Override
                public void onFailure(int statusCode, Header[] headers, byte[] responseBody, Throwable error) {
                    Log.d("onFailure", "onFailure");
                }
            });

            handler.postDelayed(this, 3000);
        }
    }, 3000);

}

private void animateMarkerNew(final Location destination, final Marker marker) {

    if (marker != null) {

                final LatLng startPosition = marker.getPosition();
                final LatLng endPosition = new LatLng(destination.getLatitude(), destination.getLongitude());

                final float startRotation = marker.getRotation();
                final LatLngInterpolatorNew latLngInterpolator = new LatLngInterpolatorNew.LinearFixed();

                ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
                valueAnimator.setDuration(3000); // duration 3 second
                valueAnimator.setInterpolator(new LinearInterpolator());
                valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        try {
                            float v = animation.getAnimatedFraction();
                            LatLng newPosition = latLngInterpolator.interpolate(v, startPosition, endPosition);
                            marker.setPosition(newPosition);
                            googleMap.moveCamera(CameraUpdateFactory.newCameraPosition(new CameraPosition.Builder()
                                    .target(newPosition)
                                    .zoom(15.5f)
                                    .build()));

                            marker.setRotation(getBearing(startPosition, new LatLng(destination.getLatitude(), destination.getLongitude())));
                        } catch (Exception ex) {
                            //I don't care atm..
                        }
                    }
                });
                valueAnimator.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);

                        // if (mMarker != null) {
                            // mMarker.remove();
                        // }
                        // mMarker = googleMap.addMarker(new MarkerOptions().position(endPosition).icon(BitmapDescriptorFactory.fromResource(R.drawable.icon_car)));

                    }
                });
                valueAnimator.start();
    }
}

private interface LatLngInterpolatorNew {
    LatLng interpolate(float fraction, LatLng a, LatLng b);

    class LinearFixed implements LatLngInterpolatorNew {
        @Override
        public LatLng interpolate(float fraction, LatLng a, LatLng b) {
            double lat = (b.latitude - a.latitude) * fraction + a.latitude;
            double lngDelta = b.longitude - a.longitude;
            // Take the shortest path across the 180th meridian.
            if (Math.abs(lngDelta) > 180) {
                lngDelta -= Math.signum(lngDelta) * 360;
            }
            double lng = lngDelta * fraction + a.longitude;
            return new LatLng(lat, lng);
        }
    }
}


//Method for finding bearing between two points
private float getBearing(LatLng begin, LatLng end) {
    double lat = Math.abs(begin.latitude - end.latitude);
    double lng = Math.abs(begin.longitude - end.longitude);

    if (begin.latitude < end.latitude && begin.longitude < end.longitude)
        return (float) (Math.toDegrees(Math.atan(lng / lat)));
    else if (begin.latitude >= end.latitude && begin.longitude < end.longitude)
        return (float) ((90 - Math.toDegrees(Math.atan(lng / lat))) + 90);
    else if (begin.latitude >= end.latitude && begin.longitude >= end.longitude)
        return (float) (Math.toDegrees(Math.atan(lng / lat)) + 180);
    else if (begin.latitude < end.latitude && begin.longitude >= end.longitude)
        return (float) ((90 - Math.toDegrees(Math.atan(lng / lat))) + 270);
    return -1;
}
}
如何处理实时位置。 - M.Yogeshwaran
2
我正在使用Google Snap to Road API，并且您可以在此处查看：https://developers.google.com/maps/documentation/roads/snap - Suraj Bahadur
@SurajBahadur 旋转方面，float rot = t * toRotation + (1 - t) * startRotation; marker.setRotation(-rot > 180 ? rot / 2 : rot); 和 marker.setRotation(toRotation); 有什么区别？ - Ketan Ramani
我已经提供了标记图像，但在onAnimationUpdate时它删除了我的地图标记。我正在使用方向API，一旦我获取到我的位置，就将其传递给API并接收我的新路径（如Uber和Ola）。 - Riddhi Shah
添加动画后，目标标记不可见。 - Ashish Patel
12

鉴于Stack Overflow用户在两个不同的帖子中寻找可用代码有些困惑。这里是关于旋转和移动标记的可用代码，对我来说无缝运行。

在MainActivity.java中实现。

public void rotateMarker(final Marker marker, final float toRotation, final float st) {
    final Handler handler = new Handler();
    final long start = SystemClock.uptimeMillis();
    final float startRotation = st;
    final long duration = 1555;

    final Interpolator interpolator = new LinearInterpolator();

    handler.post(new Runnable() {
        @Override
        public void run() {
            long elapsed = SystemClock.uptimeMillis() - start;
            float t = interpolator.getInterpolation((float) elapsed / duration);

            float rot = t * toRotation + (1 - t) * startRotation;

            marker.setRotation(-rot > 180 ? rot / 2 : rot);
            if (t < 1.0) {
                // Post again 16ms later.
                handler.postDelayed(this, 16);
            }
        }
    });
}


public void animateMarker(final LatLng toPosition,final boolean hideMarke) {
    final Handler handler = new Handler();
    final long start = SystemClock.uptimeMillis();
    Projection proj = googleMap.getProjection();
    Point startPoint = proj.toScreenLocation(m.getPosition());
    final LatLng startLatLng = proj.fromScreenLocation(startPoint);
    final long duration = 5000;

    final Interpolator interpolator = new LinearInterpolator();

    handler.post(new Runnable() {
        @Override
        public void run() {
            long elapsed = SystemClock.uptimeMillis() - start;
            float t = interpolator.getInterpolation((float) elapsed
                    / duration);
            double lng = t * toPosition.longitude + (1 - t)
                    * startLatLng.longitude;
            double lat = t * toPosition.latitude + (1 - t)
                    * startLatLng.latitude;
            m.setPosition(new LatLng(lat, lng));

            if (t < 1.0) {
                // Post again 16ms later.
                handler.postDelayed(this, 16);
            } else {
                if (hideMarke) {
                    m.setVisible(false);
                } else {
                    m.setVisible(true);
                }
            }
        }
    });
}
1
感谢Vipin发布代码。我仍然不清楚你何时调用所有这些方法以及如何使用它们。 - Nishant Rajput
3
请您详细说明调用rotateMarker方法的时间以及它的参数。 - jnapor
1
@jnapor，你找到了吗？如何使用旋转标记方法？ - Vilas
1
@VipinNegi，5秒后您会同时调用animateMarker和rotateMarker方法吗？或者我可以在animateMarker内部调用rotateMarker，请简要说明或者您能否放置您的间隔代码？ - Naveen Kumar M
1
final float toRotation, final float st的参数是什么？如何获取这些参数？ - Naveen Kumar M
显示剩余16条评论
4
最终编写的代码与 OLA CABS 的功能完全相似...

以下是代码-

  1. 将 Google 地图片段放在相对布局中，并将标记（作为 ImageView）放在中心位置 -

  2. 在您的片段代码中，一旦设置了所有基本工作后，请为 onMapReady(GoogleMap googleMap) 函数编写以下代码-

我的代码如下-

//第1步-

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">



<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapsActivity_for_request_pages" />

    <ImageView
        android:layout_width="30sp"
        android:layout_height="30sp"
        android:layout_centerInParent="true"
        android:id="@+id/central_marker"
        android:src="@drawable/marker_pic"/>

</RelativeLayout>

//第二步 -
@Override
public void onMapReady(GoogleMap googleMap) {


     central_marker = (ImageView)v.findViewById(R.id.central_marker);
     int init_loc = 0,final_loc = -300;
     mMap = googleMap;

 final  CountDownTimer timer = new CountDownTimer(300,300) {
       @Override
       public void onTick(long millisUntilFinished) {

       }

       @Override
       public void onFinish() {
           init_loc = 0;
           ObjectAnimator objectAnimatorY = ObjectAnimator.ofFloat(central_marker, "translationY", final_loc, init_loc);
           objectAnimatorY.setDuration(200);
           objectAnimatorY.start();
       }
   };


    mMap.setOnCameraMoveStartedListener(new GoogleMap.OnCameraMoveStartedListener() {
        @Override
        public void onCameraMoveStarted(int i) {

            System.out.println("Camera started moving worked");
            timer.cancel();
            ObjectAnimator objectAnimatorY = ObjectAnimator.ofFloat(central_marker, "translationY", init_loc, final_loc);
            objectAnimatorY.setDuration(200);
            objectAnimatorY.start();
            init_loc = -300;

        }
    });



    mMap.setOnCameraIdleListener(new GoogleMap.OnCameraIdleListener() {
        @Override
        public void onCameraIdle() {
            System.out.println("Camera idle worked");
            if(initial_flag!=0)
            {
                System.out.println("Camera Setting timer now");
                timer.cancel();
                timer.start();
            }
            initial_flag++;
            System.out.println("Camera Value of initial_flag ="+initial_flag);
        }
    });

}
1
Firstly，我想感谢@Vipin Negi和@Prasad为我们提供如此好的、工作得很棒的代码。由于上面有很多未处理的查询，我希望能让上述所有内容变得更简单一些。各位，只需按照以下步骤来实现标记旋转。
1. 在你的MainActivity.java文件中定义以下两个方法。
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;
}

&

private void rotateMarker(final Marker marker, final float toRotation) {
    final Handler handler = new Handler();
    final long start = SystemClock.uptimeMillis();
    final float startRotation = marker.getRotation();
    final long duration = 1000;

    final Interpolator interpolator = new LinearInterpolator();

    handler.post(new Runnable() {
        @Override
        public void run() {

            long elapsed = SystemClock.uptimeMillis() - start;
            float t = interpolator.getInterpolation((float) elapsed / duration);

            float rot = t * toRotation + (1 - t) * startRotation;

            marker.setRotation(-rot > 180 ? rot / 2 : rot);
            if (t < 1.0) {
                // Post again 16ms later.
                handler.postDelayed(this, 16);
            }
        }
    });

}

2. 在此之后，将以下代码添加到您希望标记旋转的位置。

double bearing = bearingBetweenLocations(m.getPosition(), updatedLatLng);
rotateMarker(m, (float) bearing);

请注意，“m”是您要旋转的标记对象。 完成了！！！
如果您需要有关标记动画的帮助，可以使用 this 代码。
0

尝试使用谷歌默认旋转或查看详细说明标记旋转

 private void updateCamera(LatLng currentLatLng, Location location) {
    //googleMap.clear();
    if (marker == null) {
        MarkerOptions options = new MarkerOptions();
        options.position(currentLatLng);
        options.icon(BitmapDescriptorFactory.fromResource(R.mipmap.ic_driver_car_pin_v));
        options.flat(true);
        options.anchor(0.5f, 0.5f);
        marker = googleMap.addMarker(options);
    } else {
        marker.setPosition(currentLatLng);
        marker.setRotation(location.getBearing());
    }
    CameraPosition cameraPosition = new CameraPosition.Builder(googleMap.getCameraPosition())
            .target(currentLatLng).zoom(18).build();
    googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接