在Polyline路径上设置动画标记 [英] Animate marker on Polyline path
本文介绍了在Polyline路径上设置动画标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在Google地图上有 3个记号。
$ b
-
两个标记显示起止点
以下是使用在这两点之间绘制Polyline 的代码：
private void polyLine（）{
LatLng starting = new LatLng（##。######，##。######）;
LatLng ending = new LatLng（##。######，##。######）;
PolylineOptions line = new PolylineOptions（）。add（starting，ending）;
mGoogleMap.addMarker（new MarkerOptions（）。position（starting）.title（Start））;
mGoogleMap.addMarker（new MarkerOptions（）。position（ending）.title（End））;
mGoogleMap.addPolyline（line）;
$ c
- 显示
当前位置 [HUE_ROSE]
然后使用以下命令将 >标记到当前位置 ：
@Override
public void onLocationChanged（Location location）
{
Toast.makeText（this，Location Changed + location.getLatitude（）
+ location.getLongitude（），Toast.LENGTH_LONG）.show（）;
mLastLocation = location;
if（mCurrLocationMarker！= null）{
mCurrLocationMarker.remove（）;
}
LatLng latLng = new LatLng（location.getLatitude（），location.getLongitude（））;
if（ourGlobalMarker == null）{//首次添加标记来映射
ourGlobalMarker = mGoogleMap.addMarker（new MarkerOptions（）。position（latLng）
.icon（ BitmapDescriptorFactory.defaultMarker（BitmapDescriptorFactory.HUE_ROSE）））;
MarkerAnimation.animateMarkerToICS（ourGlobalMarker，latLng，new LatLngInterpolator.Spherical（））;
mGoogleMap.moveCamera（CameraUpdateFactory.newLatLngZoom（latLng，18））;
} else {
MarkerAnimation.animateMarkerToICS（ourGlobalMarker，latLng，new LatLngInterpolator.Spherical（））;
mGoogleMap.moveCamera（CameraUpdateFactory.newLatLngZoom（latLng，18））;
}
}
问题： strong>
获取动画标记，但是Polyline的右侧
解决方案：
如何显示动画标记在Polyline路径
我尝试了很多来找到 解决方案 ，但是没有找到任何东西，请分享您的建议
解决方案我假设你有3个记号
1.来源点
2。目的地点
3.移动标记
您必须尝试这种方式，它会帮助您
<$ p （$！
$ b）private void animateMarkerNew（final LatLng startPosition，final LatLng destination，final Marker marker）{
if（marker！= null）{
final LatLng endPosition = new LatLng（destination.latitude，destination.longitude）;
final float startRotation = marker.getRotation（）;
final LatLngInterpolatorNew latLngInterpolator = new LatLngInterpolatorNew.LinearFixed（）;
ValueAnimator valueAnimator = ValueAnimator.ofFloat（0，1）;
valueAnimator.setDuration（2000）; //持续时间3秒
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（）） b $ b .target（newPosition）
.zoom（18f）
.build（）））;
marker.setRotation（getBearing（startPosition，new LatLng（destination.latitude ，destination.longitude）））;
} catch（Exception ex）{
//我不在乎atm ..
}
}
}）;
valueAnimator.addListener（new AnimatorListenerAdapter（）{
@Override
public void onAnimationEnd（动画动画）{
super.onAnimationEnd（动画）;
//新增MarkerOptions（）。position（endPosition）; //如果（mMarker！= null）{
// mMarker.remove（）;
//}
// mMarker = googleMap.addMarker .icon（BitmapDescriptorFactory.fromResource（R.drawable.icon_car）））;
}
}）;
valueAnimator.start（）;
$ / code $ / pre
注意：marker是指你想要动画的标记
private interface LatLngInterpolatorNew {
LatLng interpolate（float fraction，LatLng a，LatLng b）;
类LinearFixed实现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;
//走180号子午线的最短路径。
if（Math.abs（lngDelta）> 180）{
ngDelta - = Math.signum（lngDelta）* 360;
}
double lng = lngDelta * fraction + a.longitude;
返回新的LatLng（lat，lng）;
}
}
}
//在两点之间找到方位的方法
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）;
返回-1;
}
I have 3 markers on a Google Map.
Two Markers to show starting and ending points
Here is the code using to draw a Polyline between these two points:
private void polyLine() {
LatLng starting = new LatLng(##.######, ##.######);
LatLng ending = new LatLng(##.######, ##.######);
PolylineOptions line = new PolylineOptions().add(starting, ending);
mGoogleMap.addMarker(new MarkerOptions().position(starting).title("Start"));
mGoogleMap.addMarker(new MarkerOptions().position(ending).title("End"));
mGoogleMap.addPolyline(line);
}
One Marker to show current Location [HUE_ROSE]
And to animate marker to current location using:
@Override
public void onLocationChanged(Location location)
{
Toast.makeText(this, "Location Changed " + location.getLatitude()
+ location.getLongitude(), Toast.LENGTH_LONG).show();
mLastLocation = location;
if (mCurrLocationMarker != null) {
mCurrLocationMarker.remove();
}
LatLng latLng = new LatLng(location.getLatitude(), location.getLongitude());
if(ourGlobalMarker == null) { // First time adding marker to map
ourGlobalMarker = mGoogleMap.addMarker(new MarkerOptions().position(latLng)
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)));
MarkerAnimation.animateMarkerToICS(ourGlobalMarker, latLng, new LatLngInterpolator.Spherical());
mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng, 18));
} else {
MarkerAnimation.animateMarkerToICS(ourGlobalMarker, latLng, new LatLngInterpolator.Spherical());
mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng, 18));
}
}
PROBLEM:
Getting Animating Marker, but right side of Polyline
SOLUTION:
How Can I show Animated Marker on Polyline Path
I tried a lot to find solution for this one, but did not find any thing, share your suggestions.
解决方案 I am assuming you have 3 marker
1. Source point
2. Destination Point
3. Moving marker
you have to try this way it will help you
private void animateMarkerNew(final LatLng startPosition, final LatLng destination, final Marker marker) {
if (marker != null) {
final LatLng endPosition = new LatLng(destination.latitude, destination.longitude);
final float startRotation = marker.getRotation();
final LatLngInterpolatorNew latLngInterpolator = new LatLngInterpolatorNew.LinearFixed();
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
valueAnimator.setDuration(2000); // 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(18f)
.build()));
marker.setRotation(getBearing(startPosition, new LatLng(destination.latitude, destination.longitude)));
} 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();
}
}
Note: marker is mean which marker you want to animate that one.
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;
}
这篇关于在Polyline路径上设置动画标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
