- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
我正在尝试根据折线和动画移动标记。类似于下图:
Mapbox已经在做这种演示了。但我想使用谷歌地图实现同样的目标。但是现在我的标记没有沿着路径旋转。这是我尝试过的:
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);
}
还有动画:
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);
}
}
}
});
}
最佳答案
您可以将基于自定义标记动画的方法用于您的任务:分别为所有方向点的汽车运动和汽车转弯设置动画。为此,您需要 2 种动画:
1) 汽车运动动画;
2) 汽车转弯动画;
在其末端相互调用(末端的汽车运动动画调用汽车转弯动画,反之亦然:其末端的汽车转弯动画调用汽车运动动画,因此对于汽车路径的所有点)。
例如上图:
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();
// 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();
}
}
});
}
在哪里
mMarkerIcon
是:
Bitmap mMarkerIcon;
...
mMarkerIcon = BitmapFactory.decodeResource(getResources(), R.drawable.the_car); // for your car icon in file the_car.png in drawable folder
并且汽车图标应朝北:
适用于正确的旋转
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();
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();
}
}
});
}
其中 nextMoveAnimation()
是:
private void nextMoveAnimation() {
if (mIndexCurrentPoint < mPathPolygonPoints.size() - 1) {
animateCarMove(mCarMarker, mPathPolygonPoints.get(mIndexCurrentPoint), mPathPolygonPoints.get(mIndexCurrentPoint+1), MOVE_ANIMATION_DURATION);
}
}
mPathPolygonPoints
(汽车旅行的地理点)是:
private List<LatLng> 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) 等等。
关于java - 如何使用谷歌地图沿折线移动标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40526350/
有没有办法将多个线段视为 1 条线? IE:我将鼠标悬停在其中一个上,两者都会突出显示,并且切换图例中的可见性将隐藏这两个部分。 http://jsfiddle.net/rayholland/HSvB
我正在使用 geojson 创建折线。我的geojson的格式如下: var myLines = [{ "type": "LineString", "coordinates": [[-
我对 matlab 和图像处理很陌生 我想要实现的是检测图像中的不规则线条。例如,在下图中,有 4 条折线: 我的目标是得到一组代表这 4 条不规则线/折线的像素点。像这样。 我已经通读了一些主题,例
本章响应小伙伴的反馈,除了算法自动画连接线(仍需优化完善),实现了可以手动绘制直线、折线连接线功能。 请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Is
这一章把直线连接改为折线连接,沿用原来连接点的关系信息。关于折线的计算,使用的是开源的 AStar 算法进行路径规划,启发方式为 曼哈顿距离,且不允许对角线移动。 请大家动动小手,给我一个免费
话接上回《前端使用 Konva 实现可视化设计器(13)- 折线 - 最优路径应用【思路篇】》,这一章继续说说相关的代码如何构思的,如何一步步构建数据模型可供 AStar 算法进行路径规划,最终画出节
是否可以使用水平线性渐变描边 SVG 多段线,其中渐变的角度在每个多段线顶点发生变化?它看起来像这样: 最佳答案 看看tubefy以色列艾森伯格。目前 svg 中没有任何内容可以准确地以声明方式提供您
我已经实现了一些代码,可以在单击 ListView 项时从 URL 加载图像;这已经用“虚拟”图像进行了测试,并且在 ImageView 对象中显示的图像没有任何问题。 但是,我真正想做的是通过 UR
我正在编写一个函数,用于在 mouseover 和 mouseout 上添加和删除 Mapbox polyline。我的 mouseover 可以正常工作,但我似乎不知道如何在 mouseout 上访
我使用此代码在 OSM 上有一些自定义折线 var polyline1 = [ [44.772142, 17.208980], [44.774753, 17.20764
我的应用程序是实时跟踪器,多个用户登录并通过将他们的坐标发送到我们的网络服务来更新他们的位置,然后每 2 分钟回调一次,让我们在我的 MapView 上显示所有用户。 每次我在 connectionD
我想知道是否有一种方法可以通过单击来突出折线。像这样: Before click After click 最佳答案 您可以使用折线两次。第一次折线更宽并且笔划不透明度为“0”。当您将鼠标悬停在该组上时
我需要显示从 A 到 B 的不同折线。因此,这些线应该彼此区分。我曾尝试使用带有高度参数的推点函数来设置折线。然而它仍然在地面上。我插入的最后一条折线会覆盖前一条折线。高度值适用于标记,但我想将其应用
我正在尝试向 svg 多段线添加类似叠加的效果。基本目标是使单击该线变得容易,并且由于该线太细,我想添加一个背景叠加层,当鼠标悬停在上面时会亮起。 我使用多边形尝试了以下方法,但这看起来很乏味。 (线
如何在 Google map 中绘制圆弧折线? 我已经用过this创建曲线折线的代码。 下面是绘制曲线折线的方法: private void showCurvedPolyline (LatLng p1
背景: 开发使用 Android Google Map v2 的原生 Android 应用,使用 android.support.v4.app.FragmentActivity。在 Android v
如何使用 JavaScript 将坐标添加到现有的 SVG 折线? 我正在使用 IE 9(在 .hta 文件中)并且需要能够动态地将新点附加到折线。目标是能够创建折线图。我提前道歉,我完
如何在 JavaScript 中拆分数据数组 {x:30, y:45, x:36, y:49} 进入表格 [30, 45, 36, 49] ? 我需要此表单才能将坐标传递给 SVG 折线。我找到了一个
在角度 6 中。我正在为 agm-polyline 使用流动代码。 我想在 agm-polyline 中添加箭头符号(折线)( https://developers.google.com/maps/d
我在 map 上做了路线。使用一些坐标生成的路线,这些坐标完成了附加信息(速度)。我希望当路线悬停时,将出现一个工具提示并显示这些坐标处的信息(速度)。我很困惑如何显示速度的工具提示。 Po
我是一名优秀的程序员,十分优秀!