问题出在默认情况下，Google Street View API会选择离目标坐标最近的街景拍摄点，但拍摄方向不一定朝向目标建筑。可以通过以下步骤强制摄像头对准目标：

1. 计算拍摄点到目标坐标的方位角 #

编写工具函数，根据街景拍摄点的坐标（从Metadata API获取）和目标坐标，计算摄像头需要朝向的方位角（heading）：

function calculateHeading(fromLat: number, fromLng: number, toLat: number, toLng: number): number {
  const φ1 = fromLat * Math.PI / 180;
  const φ2 = toLat * Math.PI / 180;
  const Δλ = (toLng - fromLng) * Math.PI / 180;

  const y = Math.sin(Δλ) * Math.cos(φ2);
  const x = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
  let θ = Math.atan2(y, x);
  θ = (θ * 180 / Math.PI + 360) % 360; // 转换为0-360度范围
  return θ;
}

2. 修改useEffect中的API请求逻辑 #

在Metadata请求成功后，提取拍摄点坐标计算方位角，将heading参数添加到街景图片请求URL中，同时可调整fov参数缩小视野，让目标建筑更突出：

useEffect(() => {
  if (!apiKey || !lat || !lng) return

  const metadataUrl = `https://maps.googleapis.com/maps/api/streetview/metadata?location=${lat},${lng}&key=${apiKey}`

  // 计算方位角的工具函数
  function calculateHeading(fromLat: number, fromLng: number, toLat: number, toLng: number): number {
    const φ1 = fromLat * Math.PI / 180;
    const φ2 = toLat * Math.PI / 180;
    const Δλ = (toLng - fromLng) * Math.PI / 180;

    const y = Math.sin(Δλ) * Math.cos(φ2);
    const x = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
    let θ = Math.atan2(y, x);
    θ = (θ * 180 / Math.PI + 360) % 360;
    return θ;
  }

  fetch(metadataUrl)
    .then((response) => response.json())
    .then((data) => {
      if (data.status === "OK") {
        setHasStreetView(true)
        const baseUrl = "https://maps.googleapis.com/maps/api/streetview"
        const size = "600x400"
        // 获取街景拍摄点的实际坐标
        const panoramaLat = data.location.lat;
        const panoramaLng = data.location.lng;
        // 计算朝向目标坐标的方位角
        const heading = calculateHeading(panoramaLat, panoramaLng, lat, lng);
        // 可选：调整视野范围，数值越小画面越聚焦
        const fov = 70;
        // 添加heading和fov参数到请求URL
        const url = `${baseUrl}?size=${size}&location=${lat},${lng}&source=outdoor&heading=${heading}&fov=${fov}&key=${apiKey}`;
        setPreviewUrl(url)
      } else {
        setHasStreetView(false)
        setPreviewUrl("/images/street-view-fallback.png")
      }
    })
    .catch((err) => {
      console.error("Error fetching Street View metadata:", err)
      setHasStreetView(false)
      setPreviewUrl("/images/streetview-fallback.png")
    })
}, [apiKey, lat, lng])

额外优化建议 #

• 强制指定拍摄点：在URL中添加&pano=${data.pano_id}，确保API使用当前Metadata返回的拍摄点，避免自动选择其他更远的拍摄点。
• 微调俯仰角度：如果目标建筑在拍摄点的上下方向，可添加&pitch=[数值]（范围-90到90）调整摄像头俯仰角度。

注意：如果目标建筑附近没有正对的街景拍摄点，这种方法只能尽量优化视角，但已能解决大部分场景的问题。

内容的提问来源于stack exchange，提问作者Ala Eddine Menai