如何使用谷歌地图沿折线移动标记 [英] How to move marker along polyline using google map
问题描述
我正在尝试根据折线和动画移动标记.类似于下图:
1) 汽车从P0到P1的运动动画；
2) 汽车启动动画P1;
3) 汽车从P1到P2
等等.
汽车运动动画可以通过这样的方法实现:
private void animateCarMove(final Marker marker, final LatLng beginLatLng, final LatLng endLatLng, final long duration) {final Handler handler = new Handler();final long startTime = SystemClock.uptimeMillis();final Interpolator interpolator = new LinearInterpolator();//为当前路径部分设置汽车方位float angleDeg = (float)(180 * getAngle(beginLatLng, endLatLng)/Math.PI);矩阵矩阵 = 新矩阵()；矩阵.postRotate(angleDeg);marker.setIcon(BitmapDescriptorFactory.fromBitmap(Bitmap.createBitmap(mMarkerIcon, 0, 0, mMarkerIcon.getWidth(), mMarkerIcon.getHeight(), matrix, true));handler.post(new Runnable() {@覆盖公共无效运行(){//计算动画阶段long elapsed = SystemClock.uptimeMillis() - startTime;float t = interpolator.getInterpolation((float) elapsed/duration);//计算标记的新位置double lat = (endLatLng.latitude - beginLatLng.latitude) * t + beginLatLng.latitude;double lngDelta = endLatLng.longitude - beginLatLng.longitude;如果(Math.abs(lngDelta)> 180){lngDelta -= Math.signum(lngDelta) * 360;}双 lng = lngDelta * t + beginLatLng.longitude;标记.setPosition(new LatLng(lat, lng));//如果不是路径线段的结尾如果 (t <1.0) {//调用下一个标记位置handler.postDelayed(this, 16);} 别的 {//调用转弯动画nextTurnAnimation();}}});}哪里
mMarkerIcon 是:
位图 mMarkerIcon;...mMarkerIcon = BitmapFactory.decodeResource(getResources(), R.drawable.the_car);//在 drawable 文件夹中的文件 the_car.png 中的汽车图标和汽车图标应该朝北:
正确旋转应用
nextTurnAnimation() - 在汽车运动动画结束时调用的方法来启动汽车转弯动画:
private void nextTurnAnimation() {mIndexCurrentPoint++;if (mIndexCurrentPoint < mPathPolygonPoints.size() - 1) {LatLng prevLatLng = mPathPolygonPoints.get(mIndexCurrentPoint - 1);LatLng currLatLng = mPathPolygonPoints.get(mIndexCurrentPoint);LatLng nextLatLng = mPathPolygonPoints.get(mIndexCurrentPoint + 1);float beginAngle = (float)(180 * getAngle(prevLatLng, currLatLng)/Math.PI);float endAngle = (float)(180 * getAngle(currLatLng, nextLatLng)/Math.PI);animateCarTurn(mCarMarker，beginAngle，endAngle，TURN_ANIMATION_DURATION)；}}轮到汽车转弯动画方法可以是这样的:
private void animateCarTurn(final Marker marker, final float startAngle, final float endAngle, final long duration) {final Handler handler = new Handler();final long startTime = SystemClock.uptimeMillis();final Interpolator interpolator = new LinearInterpolator();最终浮动 dAndgle = endAngle - startAngle;矩阵矩阵 = 新矩阵()；matrix.postRotate(startAngle);位图rotatedBitmap = Bitmap.createBitmap(mMarkerIcon, 0, 0, mMarkerIcon.getWidth(), mMarkerIcon.getHeight(), matrix, true);marker.setIcon(BitmapDescriptorFactory.fromBitmap(rotatedBitmap));handler.post(new Runnable() {@覆盖公共无效运行(){long elapsed = SystemClock.uptimeMillis() - startTime;float t = interpolator.getInterpolation((float) elapsed/duration);矩阵 m = 新矩阵 ();m.postRotate(startAngle + dAndgle * t);marker.setIcon(BitmapDescriptorFactory.fromBitmap(Bitmap.createBitmap(mMarkerIcon, 0, 0, mMarkerIcon.getWidth(), mMarkerIcon.getHeight(), m, true));如果 (t <1.0) {handler.postDelayed(this, 16);} 别的 {nextMoveAnimation();}}});}其中 nextMoveAnimation() 是:
private void nextMoveAnimation() {if (mIndexCurrentPoint < mPathPolygonPoints.size() - 1) {animateCarMove(mCarMarker, mPathPolygonPoints.get(mIndexCurrentPoint), mPathPolygonPoints.get(mIndexCurrentPoint+1), MOVE_ANIMATION_DURATION);}}mPathPolygonPoints(汽车旅行的地理点)是:
私有列表mPathPolygonPoints; mIndexCurrentPoint 变量是路径上当前点的索引(它应该在动画开始时为 0，并在 nextTurnAnimation() 方法中的每一个路径转弯时递增).
TURN_ANIMATION_DURATION - 汽车开启路径地理点的持续时间(以毫秒为单位)动画；
MOVE_ANIMATION_DURATION - 汽车沿路径线段移动的持续时间(以毫秒为单位)动画；
为了得到轴承你可以使用这样的方法:
private double getAngle(LatLng beginLatLng, LatLng endLatLng) {double f1 = Math.PI * beginLatLng.latitude/180;double f2 = Math.PI * endLatLng.latitude/180;double dl = Math.PI * (endLatLng.longitude - beginLatLng.longitude)/180;return Math.atan2(Math.sin(dl) * Math.cos(f2) , Math.cos(f1) * Math.sin(f2) - Math.sin(f1) * Math.cos(f2) * Math.cos(dl));;}最后，您可以通过调用一次 animateCarMove() 来启动所有动画:
animateCarMove(mCarMarker, mPathPolygonPoints.get(0), mPathPolygonPoints.get(1), MOVE_ANIMATION_DURATION);将为汽车路径的每个点自动调用其他动画步骤.
并且您应该考虑一些特殊情况"，例如:
1) 改变转向角的符号(例如方位从-120度变为150度)；
2) 用户中断动画的可能性；
3) 计算路径段长度的动画持续时间(例如，1 公里段长度为 1 秒，而不是固定的 MOVE_ANIMATION_DURATION)
4) 可能在 handler.postDelayed(this, 16); 行中调整值 16 以获得更好的性能；
5) 等等.
I am trying to move the marker according to the polyline and with animation. Similar to the below image:
Mapbox is already giving this kind of demo. But I want to achieve the same using Google maps. However right now my marker is not rotating along the path. Here is what I have tried:
private void onReady(List<LatLng> polyz) {
for (int i = 0; i < polyz.size() - 1; i++) {
LatLng src = polyz.get(i);
LatLng dest = polyz.get(i + 1);
Polyline line = map.addPolyline(new PolylineOptions()
.add(new LatLng(src.latitude, src.longitude),
new LatLng(dest.latitude, dest.longitude))
.width(2).color(Color.RED).geodesic(true));
}
LatLngBounds.Builder builder = new LatLngBounds.Builder();
builder.include(polyz.get(0));
builder.include(polyz.get(polyz.size()-1));
map.moveCamera(CameraUpdateFactory.newLatLngBounds(builder.build(), 48));
map.animateCamera(CameraUpdateFactory.zoomTo(7), 1000, null);
BitmapDescriptor icon = BitmapDescriptorFactory.fromResource(R.drawable.car);
marker = map.addMarker(new MarkerOptions()
.position(polyz.get(0))
.title("Curr")
.snippet("Move"));
marker.setIcon(icon);
}
And the animation:
private void animateMarker(GoogleMap myMap, final Marker marker, final List<LatLng> directionPoint,
final boolean hideMarker) {
final Handler handler = new Handler();
final long start = SystemClock.uptimeMillis();
Projection proj = myMap.getProjection();
final long duration = 600000;
final Interpolator interpolator = new LinearInterpolator();
handler.post(new Runnable() {
int i = 0;
@Override
public void run() {
long elapsed = SystemClock.uptimeMillis() - start;
float t = interpolator.getInterpolation((float) elapsed
/ duration);
Location location=new Location(String.valueOf(directionPoint.get(i)));
Location newlocation=new Location(String.valueOf(directionPoint.get(i+1)));
marker.setAnchor(0.5f, 0.5f);
marker.setRotation(location.bearingTo(newlocation) - 45);
if (i < directionPoint.size()) {
marker.setPosition(directionPoint.get(i));
}
i++;
if (t < 1.0) {
// Post again 16ms later.
handler.postDelayed(this, 16);
} else {
if (hideMarker) {
marker.setVisible(false);
} else {
marker.setVisible(true);
}
}
}
});
}
You can use for your task your approach based on custom marker animation: animate separately car movement and car turns throughout all direction points. For this You need 2 kinds of animation:
1) animation for car movement;
2) animation for car turn;
which calls each other on its end (car movement animation on end calls car turn animation and vice versa: car turn animation on its end calls car movement animation and so for all points of car path).
For example on fig.:
1) animation for car movement from P0 to P1;
2) animation for car turn on P1;
3) animation for car movement from P1 to P2
and so on.
Car movement animation can be implemented by method like this:
private void animateCarMove(final Marker marker, final LatLng beginLatLng, final LatLng endLatLng, final long duration) {
final Handler handler = new Handler();
final long startTime = SystemClock.uptimeMillis();
final Interpolator interpolator = new LinearInterpolator();
// set car bearing for current part of path
float angleDeg = (float)(180 * getAngle(beginLatLng, endLatLng) / Math.PI);
Matrix matrix = new Matrix();
matrix.postRotate(angleDeg);
marker.setIcon(BitmapDescriptorFactory.fromBitmap(Bitmap.createBitmap(mMarkerIcon, 0, 0, mMarkerIcon.getWidth(), mMarkerIcon.getHeight(), matrix, true)));
handler.post(new Runnable() {
@Override
public void run() {
// calculate phase of animation
long elapsed = SystemClock.uptimeMillis() - startTime;
float t = interpolator.getInterpolation((float) elapsed / duration);
// calculate new position for marker
double lat = (endLatLng.latitude - beginLatLng.latitude) * t + beginLatLng.latitude;
double lngDelta = endLatLng.longitude - beginLatLng.longitude;
if (Math.abs(lngDelta) > 180) {
lngDelta -= Math.signum(lngDelta) * 360;
}
double lng = lngDelta * t + beginLatLng.longitude;
marker.setPosition(new LatLng(lat, lng));
// if not end of line segment of path
if (t < 1.0) {
// call next marker position
handler.postDelayed(this, 16);
} else {
// call turn animation
nextTurnAnimation();
}
}
});
}
where
mMarkerIcon is:
Bitmap mMarkerIcon;
...
mMarkerIcon = BitmapFactory.decodeResource(getResources(), R.drawable.the_car); // for your car icon in file the_car.png in drawable folder
and car icon should be North oriented:
for correct rotation apply
nextTurnAnimation() - method called on end of car movement animation to start car turn animation:
private void nextTurnAnimation() {
mIndexCurrentPoint++;
if (mIndexCurrentPoint < mPathPolygonPoints.size() - 1) {
LatLng prevLatLng = mPathPolygonPoints.get(mIndexCurrentPoint - 1);
LatLng currLatLng = mPathPolygonPoints.get(mIndexCurrentPoint);
LatLng nextLatLng = mPathPolygonPoints.get(mIndexCurrentPoint + 1);
float beginAngle = (float)(180 * getAngle(prevLatLng, currLatLng) / Math.PI);
float endAngle = (float)(180 * getAngle(currLatLng, nextLatLng) / Math.PI);
animateCarTurn(mCarMarker, beginAngle, endAngle, TURN_ANIMATION_DURATION);
}
}
In its turn car turn animation method can be like this:
private void animateCarTurn(final Marker marker, final float startAngle, final float endAngle, final long duration) {
final Handler handler = new Handler();
final long startTime = SystemClock.uptimeMillis();
final Interpolator interpolator = new LinearInterpolator();
final float dAndgle = endAngle - startAngle;
Matrix matrix = new Matrix();
matrix.postRotate(startAngle);
Bitmap rotatedBitmap = Bitmap.createBitmap(mMarkerIcon, 0, 0, mMarkerIcon.getWidth(), mMarkerIcon.getHeight(), matrix, true);
marker.setIcon(BitmapDescriptorFactory.fromBitmap(rotatedBitmap));
handler.post(new Runnable() {
@Override
public void run() {
long elapsed = SystemClock.uptimeMillis() - startTime;
float t = interpolator.getInterpolation((float) elapsed / duration);
Matrix m = new Matrix();
m.postRotate(startAngle + dAndgle * t);
marker.setIcon(BitmapDescriptorFactory.fromBitmap(Bitmap.createBitmap(mMarkerIcon, 0, 0, mMarkerIcon.getWidth(), mMarkerIcon.getHeight(), m, true)));
if (t < 1.0) {
handler.postDelayed(this, 16);
} else {
nextMoveAnimation();
}
}
});
}
where nextMoveAnimation() is:
private void nextMoveAnimation() {
if (mIndexCurrentPoint < mPathPolygonPoints.size() - 1) {
animateCarMove(mCarMarker, mPathPolygonPoints.get(mIndexCurrentPoint), mPathPolygonPoints.get(mIndexCurrentPoint+1), MOVE_ANIMATION_DURATION);
}
}
The mPathPolygonPoints (geopoints of car trip) is:
private List<LatLng> mPathPolygonPoints;
And the mIndexCurrentPoint variable is index of current point on path (it should be 0 at start of animation and incremented on each turn of path in nextTurnAnimation() method).
TURN_ANIMATION_DURATION - duration (in ms) animation for car turn on path geopoint;
MOVE_ANIMATION_DURATION - duration (in ms) animation for car movement along line segment of path;
To get bearing You can use method like that:
private double getAngle(LatLng beginLatLng, LatLng endLatLng) {
double f1 = Math.PI * beginLatLng.latitude / 180;
double f2 = Math.PI * endLatLng.latitude / 180;
double dl = Math.PI * (endLatLng.longitude - beginLatLng.longitude) / 180;
return Math.atan2(Math.sin(dl) * Math.cos(f2) , Math.cos(f1) * Math.sin(f2) - Math.sin(f1) * Math.cos(f2) * Math.cos(dl));;
}
Finally You can start all animations by call animateCarMove() once:
animateCarMove(mCarMarker, mPathPolygonPoints.get(0), mPathPolygonPoints.get(1), MOVE_ANIMATION_DURATION);
other steps of animation will be called automatically for each point of car path.
And You should take into account some "special cases" like:
1) changing sign of of turn angle (e.g. bearing changes from -120 to 150 degrees);
2) possibilities for interrupt of animation by user;
3) calculate animation duration on path segment length (e.g. 1 sec for 1 km of segment length instead of fixed MOVE_ANIMATION_DURATION)
4) probably tune value 16 in handler.postDelayed(this, 16); line for better performance;
5) and so on.
这篇关于如何使用谷歌地图沿折线移动标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
