平滑运动中的GMap轴承旋转(更改轴承值时避免抖动效应)
我想通过更改方位角值来旋转GMap，这样相机就可以围绕中心点旋转(360度一整圆)。当我们改变方向角时，在相机的起始点和结束点有一个缓动效果。我如何控制/更改它，以便在更改Bearing值时使旋转平滑(以便在360度中旋转贴图，平滑动画)？
这对于所有语言都是必需的，因为在不同的语言库中，缓解效果似乎是不同的。例如: Swift、安卓、PHP、JS、Node.js、React。
Swift示例(在线性动画中运行正常)：
请注意，最初动画在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值更改时，可以清楚地显示抖动效果。
回答 3
Stack Overflow用户
发布于 2018-04-25 21:18:43
在经历了所有可能的情况后，我才知道GMap不是用自定义动画一次性360度旋转地图所需的功能构建的。不知道这是否会出现在下一个GMap应用编程接口版本中。
现在，可能的解决方案是改变动画逻辑，而不是旋转360度，我们可以旋转到180度，降低动画速度(动画持续时间)。
这允许我们为用户带来所需的地图周围的搜索体验。
(现在我发布这个临时答案，并允许其他人在将来更新或发布最新的答案)。
我已经在GMap问题跟踪器上提交了这个动画控制问题，为了显示你的兴趣和反馈，请开始这个问题，这样谷歌团队就可以把这个功能纳入他们的最终考虑。https://issuetracker.google.com/u/1/issues/71738889
Stack Overflow用户
发布于 2018-04-17 02:05:20
我打算写这个作为另一个答案，因为我想花时间写一整面墙的文字，而我想让另一个答案尽可能简短，因为它仍然可以帮助其他有类似问题的人。
The problem
因此，如果我理解正确的话，您要做的是使用Google地图为不同的平台构建一个应用程序。你遇到了一个Google地图的问题(急转直下的运动)，你正试图为所有的平台找到一个解决方案。
My proposed solutions
我将把它分成几个部分，因为我看到了前进的不同方法。
- 找到适用于所有平台的解决方案。
这个问题看起来最简单，但它可能类似于XY问题。我试着向你介绍了一些视图动画的方法，你已经在你的iOS应用程序中解决了这个问题，但核心是你要处理的是谷歌地图动画在改变方向时的一个缺陷。我不确定是否有办法在每个平台上解决这个问题，因为我还没有尝试过。
- 使用不同的地图
这听起来像是很大的一步，根据你的使用情况，你不想做的事情。然而，我已经成功地在iOS和安卓系统上使用了带有WKWebView的Leaflet ( JS地图)，而且都运行得很好(这显然也可以在浏览器中运行得很好)。请记住，其他一些贴图也可能具有抖动动画。
的包装
我希望我已经给出了一些见解。当我们发现关于这个问题的新东西时，我会补充这个答案。你能试着提供一个最小的可重现的例子吗？这样我就可以更好地尝试一下。祝好运!
Stack Overflow用户
发布于 2021-05-15 14:28:59
这里是我的方法：
=45f
=18
= currentLocation
- bearing = lastKnownLocation.bearingTo(currentLocation)
- Use map.animateCamera()；//而不是move
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和currentLocation之间的距离大于50米，那么我们只会设置方向，否则我们只会继续更改targetLocation。
这样，我们就可以像谷歌地图一样显示航向。
https://stackoverflow.com/questions/48123738
复制相似问题
腾讯云开发者
