设置相机动画以在Google地图中定位和设置平移

Question

我正在尝试实现类似于Google地图导航的工作方式，请查看下面的图片以供参考。在Google地图中，标记看起来是在静态位置，除了相机在变化

---

。

为此，我会在每次更改位置时为标记设置动画，然后通过在Y坐标上将其平移-300px来将其定位到屏幕底部。

但是我无法为相机动画以改变位置，同时将屏幕向下移动300px。

当我对摄像机进行动画处理以改变位置时，标记会精确地移动到屏幕的中心，然后当我将摄像机移动300px到其他动画下方时，这会很烦人。

有没有一种方法可以实现Google Maps的功能？任何参考或帮助表示赞赏。

Answer 1

该代码已在import someComponent from './someComponent' export default { created () { Component.initialize() } } 中完全实现，但如记录所示，其中一些可以在初始化期间提取。

基本上，使用从屏幕像素偏移量得出的距离从当前位置计算阴影目标，该距离是使用从最后一个位置计算出的方位角推断出来的。

在屏幕记录（下）中，绿色圆圈代表当前位置（也由地图位置点表示），蓝色圆圈代表阴影目标，由于阴影目标始终位于屏幕中央地图动画的目标。

以下是概念的简要说明：

和代码（下面有屏幕记录）：

onLocationChanged

注意：

• 缩放比例发生变化时，需要重新计算@Override public void onLocationChanged(Location location) { // First point processing if (lastLocation == null) { // save last location lastLocation = location; // initial camera CameraPosition.Builder b = CameraPosition.builder(). zoom(15.0F). target(new LatLng(lastLocation.getLatitude(), lastLocation.getLongitude())); CameraUpdate cu = CameraUpdateFactory.newCameraPosition(b.build()); mMap.animateCamera(cu); return; } // subsequent updates LatLng oldPos = new LatLng(lastLocation.getLatitude(), lastLocation.getLongitude()); LatLng newPos = new LatLng(location.getLatitude(), location.getLongitude()); // ignore very small position deviations (prevents wild swinging) double d = SphericalUtil.computeDistanceBetween(oldPos, newPos); if (d < 10) { return; } // compute our own bearing (do not use location bearing) double bearing = SphericalUtil.computeHeading(oldPos, newPos); //----------------------------------------------- // Next section really only needs to be done once // Compute distance of pixels on screen using some desirable "offset" Projection p = mMap.getProjection(); Point bottomRightPoint = p.toScreenLocation(p.getVisibleRegion().nearRight); Point center = new Point(bottomRightPoint.x/2,bottomRightPoint.y/2); Point offset = new Point(center.x, (center.y + 300)); LatLng centerLoc = p.fromScreenLocation(center); LatLng offsetNewLoc = p.fromScreenLocation(offset); // this computed value only changes on zoom double offsetDistance = SphericalUtil.computeDistanceBetween(centerLoc, offsetNewLoc); //----------------------------------------------- // Compute shadow target position from current position (see diagram) LatLng shadowTgt = SphericalUtil.computeOffset(newPos,offsetDistance,bearing); // update circles if (centerCircle != null) { centerCircle.setCenter(shadowTgt); } else { centerCircle = mMap.addCircle(new CircleOptions().strokeColor(Color.BLUE).center(shadowTgt).radius(50)); } if (carCircle != null) { carCircle.setCenter(newPos); } else { carCircle = mMap.addCircle(new CircleOptions().strokeColor(Color.GREEN).center(newPos).radius(50)); } // update camera CameraPosition.Builder b = CameraPosition.builder(); b.zoom(15.0F); b.bearing((float)(bearing)); b.target(shadowTgt); CameraUpdate cu = CameraUpdateFactory.newCameraPosition(b.build()); mMap.animateCamera(cu); // save location as last for next update lastLocation = location; } 。 （但请注意，不必每次更改位置都需要这样做。）
• 轴承在概念图中显示为0-360，但实际上是-180-180。
• 如您所见，大多数工作是在SphericalUtil类中完成的。