GMap轴承平稳运动旋转(避免改变轴承值时产生抖动效应)

Question

我想通过改变方位角值来旋转GMap，因此相机围绕中心点旋转(360度一整圈)。 当我们改变方位时，相机起点和终点都有缓动效果。如何控制/更改它以使更改值时旋转Bearing平滑(为了在 360 度中旋转地图，平滑动画)？

所有语言都需要这样做，因为不同的语言库中的缓动效果似乎不同。 例如 Swift、Android、PHP、JS、Node.js、React。

迅捷示例(在线性动画中运行正常)：

请注意，最初动画在iOS中也有抖动，但是当我们在其CATransaction属性中使用CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear时，GMap动画变成了平滑动画。 所以现在如果你看到下面的代码，Bearing值的变化不会产生生涩的效果(由于GMap动画中的缓动效果)。我也在寻找适合Android和Web的解决方案。

//Move the map around current location, first loop
let timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
CATransaction.begin()
CATransaction.setValue(3.0, forKey: kCATransactionAnimationDuration)
CATransaction.setAnimationTimingFunction(timingFunction)
CATransaction.setCompletionBlock({
//Move the map around current location, second loop
let timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
CATransaction.begin()
CATransaction.setValue(3.0, forKey: kCATransactionAnimationDuration)
CATransaction.setAnimationTimingFunction(timingFunction)
CATransaction.setCompletionBlock({
//Move the map around current location, third loop
let timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
CATransaction.begin()
CATransaction.setValue(3.0, forKey: kCATransactionAnimationDuration)
CATransaction.setAnimationTimingFunction(timingFunction)
CATransaction.setCompletionBlock({
UIView.animate(withDuration: 0.5, animations: {
self.findingYourLocation.alpha = 0.0
})
//TODO: Set nearest branch
// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
self.mapView.animate(with: zoomCamera)
// Center the camera on UBL Branch when animation finished
//let nearestBranch = CLLocationCoordinate2D(latitude: 24.850751, longitude: 67.016589)
let nearestBranch = CLLocationCoordinate2D.init(latitude: 24.806849, longitude: 67.038734)
let nearestBranchCam = GMSCameraUpdate.setTarget(nearestBranch)

CATransaction.begin()
let timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
CATransaction.setValue(3.0, forKey: kCATransactionAnimationDuration)
CATransaction.setAnimationTimingFunction(timingFunction)
CATransaction.setCompletionBlock({
self.nextButton.alpha = 1.0
})
self.mapView.animate(with: nearestBranchCam)
self.mapView.animate(toZoom: 15)
self.mapView.animate(toBearing: 0)
self.mapView.animate(toViewingAngle: 0)
CATransaction.commit()
})
self.mapView.animate(toBearing: self.mapView.camera.bearing + 120)
CATransaction.commit()
})
self.mapView.animate(toBearing: self.mapView.camera.bearing + 120)
CATransaction.commit()
})
self.mapView.animate(toBearing: self.mapView.camera.bearing + 120)
CATransaction.commit()

安卓示例代码(有问题)：

Android 示例/示例代码可在此处找到：https://issuetracker.google.com/issues/71738889

其中还包括一个.apk文件，一个示例应用输出的.mp4视频。这清楚地显示了在 360 度旋转地图时Bearing值发生变化时的生涩效果。

Answer 1

将此作为答案作为评论将很难阅读; 这是从谷歌文档中获取的。

请考虑以下代码：

CameraPosition cameraPosition = new CameraPosition.Builder()
.target(MOUNTAIN_VIEW)      // Sets the center of the map to Mountain View
.zoom(17)                   // Sets the zoom
.bearing(90)                // Sets the orientation of the camera to east
.tilt(30)                   // Sets the tilt of the camera to 30 degrees
.build();                   // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

此代码创建一个新的相机位置，这正是您要更改的：相机的方位。因此，如果您像这样创建一个新的相机位置：

CameraPosition cameraPosition = new CameraPosition.Builder()
.bearing(50)
.build();

然后将摄像机动画化到该位置：

map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

这应该可以解决问题。要提供有关您需要用作轴承的更多信息：

如果方位角为 90 度，则地图的向上方向指向正东。

祝你好运。

Answer 2

我将把它写成另一个答案，因为我想花时间写一堵文字墙，而我想让另一个答案尽可能简短，因为它仍然可以帮助其他人有类似的问题。

问题所在

因此，如果我理解正确，您要做的是使用Google地图为不同平台构建应用程序。您遇到了Google地图的问题(生涩的运动)，并且您正在尝试为所有平台找到修复方法。

我提出的解决方案

我将把它分成几个部分，因为我看到了不同的前进方式。

• 查找适用于所有平台的解决方案。

这个似乎是最直接的，但它可能类似于XY问题。我试图向您介绍一些动画视图的方法，并且您已经在iOS应用程序中解决了问题，但是您正在处理的核心是更改方位时Google地图动画中的缺陷。我不确定是否有办法在每个平台上解决这个问题，因为我还没有尝试过。

• 使用其他地图

这听起来像是一大步，根据您的使用情况，您不想做的事情。但是，我已经成功地在iOS和Android上将Leaflet(JS地图)与WKWebView一起使用，并且都运行良好(这显然在浏览器中也可以正常工作)。请记住，其他一些地图也可能具有生涩的动画。

包起来

我希望我提供了一些见解。当我们发现有关该问题的新事物时，我将添加此答案。你能尝试提供一个最小的可重现的例子吗？这样我就可以更好地尝试它。祝你好运！

Answer 3

在经历了所有可能的情况之后，我了解到GMap不是使用自定义动画一次性构建360度旋转地图的必要功能。不知道这是否出现在下一个GMapapi 版本中。

目前，可能的解决方案是更改动画逻辑，而不是旋转 360 度，我们可以旋转到 180 度，同时降低动画速度(动画持续时间)。

这使我们能够为用户提供所需的地图搜索体验。

(目前我正在发布此临时答案，并允许其他人将来更新或发布最新答案)。

---

我已经在GMap问题跟踪器上提交了这个动画控制问题，请开始这个问题，以表明您的兴趣和反馈，以便Google团队可以最终考虑此功能。 https://issuetracker.google.com/u/1/issues/71738889

Answer 4

这是我的方法：

• 倾斜度 = 45F
• 缩放 = 18
• 目标 = 当前位置
• 轴承 = 最后已知位置.轴承到(当前位置)

1. 使用 map.animateCamera();//代替移动相机

CameraPosition cameraPosition;
if (currentLocation.distanceTo(lastKnownLocation) > 50) {
cameraPosition = new CameraPosition.Builder()
.target(currentLatLng).zoom(20).tilt(45f).bearing(bearingValue).build();
} else {
cameraPosition = new CameraPosition.Builder()
.target(currentLatLng).zoom(20).tilt(45f).build();
}
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

你还要做什么？ 您必须从 LocationCallback(您获取位置更新的位置)调用此方法，然后我们才能获得流畅的体验。

因此，如果用户移动(步行或开车)并且 lastKnownLocation 和当前位置之间的距离大于 50 米，那么只有我们将设置方位，否则我们只会继续更改目标位置。

这样，我们可以像在谷歌地图中一样显示航向。