能否为Google Maps相机设置多目标点动画移动？求实现思路

当然可以实现！要让Google Maps相机依次动画移动到多个目标点（比如地点A、B、C），核心是要按顺序触发动画，并且在上一个动画完全结束后再启动下一个——毕竟地图的相机动画是异步执行的，如果直接连续调用，只会看到最后一个位置的效果，前面的动画都会被覆盖。下面给你详细拆解实现思路和示例代码：

1. 先准备目标位置列表 #

首先把需要依次前往的地点坐标整理成一个列表，不同平台的API都有对应的坐标类（比如Android的LatLng、Web的google.maps.LatLng）：

// Android Kotlin 示例
val targetLocations = listOf(
    LatLng(39.9042, 116.4074), // 地点A：北京
    LatLng(31.2304, 121.4737), // 地点B：上海
    LatLng(23.1291, 113.2644)  // 地点C：广州
)

2. 用回调/异步方式触发顺序动画 #

因为每个相机动画完成后需要收到通知才能启动下一个，所以可以用递归或者带异步等待的循环来实现：

Android 平台实现（Kotlin） #

利用GoogleMap.animateCamera()的CancelableCallback接口监听动画完成事件，递归执行下一个位置的动画：

private fun animateCameraSequentially(locations: List<LatLng>, currentIndex: Int = 0) {
    // 所有位置处理完毕就终止
    if (currentIndex >= locations.size) return

    val targetLatLng = locations[currentIndex]
    // 构建相机更新参数，可自定义缩放级别、倾斜角等
    val cameraUpdate = CameraUpdateFactory.newLatLngZoom(targetLatLng, 12f)

    googleMap?.animateCamera(cameraUpdate, object : CancelableCallback {
        override fun onFinish() {
            // 当前动画完成，递归触发下一个位置的动画
            animateCameraSequentially(locations, currentIndex + 1)
        }

        override fun onCancel() {
            // 如果动画被用户手动操作取消，可选择继续下一个或终止
            animateCameraSequentially(locations, currentIndex + 1)
        }
    })
}

// 调用方式：
animateCameraSequentially(targetLocations)

Web 平台实现（JavaScript） #

利用地图的idle事件监听动画完成，结合async/await实现顺序执行：

async function animateCameraSequentially(map, locations) {
    for (const location of locations) {
        await new Promise((resolve) => {
            // 触发相机移动动画
            map.animateCamera({
                target: location,
                duration: 2000 // 自定义动画时长，单位毫秒
            });
            // 监听地图 idle 事件，相机移动完成后触发
            const idleListener = map.addListener('idle', () => {
                idleListener.remove(); // 移除监听避免重复触发
                resolve();
            });
        });
        // 可选：在两个位置之间添加短暂延迟，让用户有时间查看当前地点
        await new Promise(resolve => setTimeout(resolve, 1000));
    }
}

// 调用方式：
const targetLocations = [
    new google.maps.LatLng(39.9042, 116.4074),
    new google.maps.LatLng(31.2304, 121.4737),
    new google.maps.LatLng(23.1291, 113.2644)
];
animateCameraSequentially(map, targetLocations);

3. 可选：自定义动画细节 #

你还可以根据需求调整动画的细节：

• 动画时长：Android可以在animateCamera中传入时长参数（比如animateCamera(cameraUpdate, 2000, callback)）；Web直接在animateCamera的配置对象里设置duration
• 相机参数：除了目标坐标，还可以设置缩放级别、旋转角、倾斜角等，让动画更贴合业务场景
• 过渡延迟：在两个动画之间添加延迟，给用户留足查看当前地点的时间

4. 注意事项 #

• 确保地图实例已经初始化完成再调用动画方法，避免空指针异常
• 如果用户在动画过程中手动操作地图（比如拖拽、缩放），可以根据业务需求选择继续后续动画或终止
• 对于大量目标点的场景，可以考虑添加进度提示，提升用户体验

内容的提问来源于stack exchange，提问作者Leon