Google Maps JS API中StreetViewPanorama.getStatus()返回undefined问题

我需要基于指定位置创建StreetViewPanorama，判断该位置是否存在全景图（存在返回true，否则返回false），仅保存已检查位置的坐标。但调用panorama.getStatus()时返回undefined，无任何异常；尝试getStatus().code和getStatus().getCode()均触发错误。

参考代码如下：

index.html #

<html>
  <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="C:/Users/pasha/Desktop/geog/style.css"/>
    <script src="C:/Users/pasha/Desktop/geog/index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <div id="pano"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>

index.js #

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14,
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    },
  );

  console.log(panorama.getStatus()); // undefined 

  map.setStreetView(panorama);
}

window.initialize = initialize;

根据API文档，getStatus()应返回StreetViewStatus.OK、StreetViewStatus.UNKNOWN_ERROR或StreetViewStatus.ZERO_RESULTS，但目前无法正常获取状态值。

问题核心是全景图初始化是异步过程，创建panorama后立即调用getStatus()时，API尚未完成位置校验与全景图加载，因此返回undefined。

方法1：监听status_changed事件 #

通过监听全景图的status_changed事件，在状态更新后获取有效状态值：

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14,
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    },
  );

  // 监听状态变更，在事件触发时获取状态
  panorama.addListener('status_changed', () => {
    const status = panorama.getStatus();
    console.log(status);
    
    // 判断是否存在全景图
    const hasPanorama = status === google.maps.StreetViewStatus.OK;
    if (hasPanorama) {
      // 此处添加保存当前坐标的逻辑
      console.log("当前位置存在全景图，坐标已保存");
    } else {
      console.log("当前位置无全景图");
    }
  });

  map.setStreetView(panorama);
}

window.initialize = initialize;

方法2：使用StreetViewService批量检查 #

如果仅需判断位置是否存在全景图（无需渲染全景），推荐使用StreetViewService的getPanorama方法，专门用于异步查询位置全景状态：

function checkPanoramaExists(location) {
  const streetViewService = new google.maps.StreetViewService();
  const searchRadius = 50; // 搜索半径（单位：米）

  streetViewService.getPanorama({ location, radius: searchRadius }, (result, status) => {
    if (status === google.maps.StreetViewStatus.OK) {
      console.log("存在全景图，坐标：", location);
      // 添加保存坐标的逻辑
    } else {
      console.log("无全景图，坐标：", location);
    }
  });
}

// 调用示例
checkPanoramaExists({ lat: 42.345573, lng: -71.098326 });

额外注意事项 #

• 确保你的API Key已启用Street View Static API或Street View Publish API（根据需求选择），否则可能导致状态查询异常。

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