Google Street View API - 捕捉缩放变化

Question

我已阅读有关 Google Street View API 的文档，但没有找到任何事件处理程序来捕捉缩放变化。 https://developers.google.com/maps/documentation/javascript/streetview#StreetViewEvents

街景活动

在街景之间导航或操纵其方向时， 您可能希望监视几个指示更改的事件 StreetViewPanorama 的状态：

pano_changed 在单个 pano ID 更改时触发。此事件不保证全景图内的任何关联数据 （例如链接）在此事件发生时也已更改 触发；此事件仅表示全景 ID 已更改。笔记 全景 ID（您可以用来引用此全景图）是 仅在当前浏览器会话中稳定。

position_changed 在全景图的基础 (LatLng) 位置发生变化时触发。旋转全景图不会触发此操作 事件。请注意，您可以更改全景图的底层位置 无需更改关联的 pano ID，因为 API 将 自动将最近的全景 ID 与全景图的 ID 关联 位置。

pov_changed 会在街景的 StreetViewPov 更改时触发。请注意，此事件可能会在位置和全景时触发 ID，保持稳定。

links_changed 会在街景的链接更改时触发。请注意，此事件可能会在全景 ID 更改后异步触发 通过 pano_changed 表示。

visible_changed 会在街景的可见性发生变化时触发。请注意，此事件可能会在更改后异步触发 在通过 pano_changed 指示的 pano ID 中。

所以，我可以捕捉到 panoID、位置、航向、俯仰的变化，但找不到捕捉缩放变化的方法。怎么做？

Answer 1

使用 zoom_changed 事件。

from the documentation（在“事件”下）：

zoom_changed |参数：无

当全景图的缩放级别发生变化时会触发此事件。

panorama.addListener('zoom_changed', function() {
  var zoomCell = document.getElementById('zoom-cell');
  zoomCell.firstChild.nodeValue = panorama.getZoom();
});

proof of concept fiddle

代码 sn-p：

function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {
        lat: 37.869,
        lng: -122.255
      },
      pov: {
        heading: 270,
        pitch: 0
      },
      visible: true
    });

  panorama.addListener('pano_changed', function() {
    var panoCell = document.getElementById('pano-cell');
    panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('links_changed', function() {
    var linksTable = document.getElementById('links_table');
    while (linksTable.hasChildNodes()) {
      linksTable.removeChild(linksTable.lastChild);
    }
    var links = panorama.getLinks();
    for (var i in links) {
      var row = document.createElement('tr');
      linksTable.appendChild(row);
      var labelCell = document.createElement('td');
      labelCell.innerHTML = '<b>Link: ' + i + '</b>';
      var valueCell = document.createElement('td');
      valueCell.innerHTML = links[i].description;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });

  panorama.addListener('position_changed', function() {
    var positionCell = document.getElementById('position-cell');
    positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
    var headingCell = document.getElementById('heading-cell');
    var pitchCell = document.getElementById('pitch-cell');
    headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
    pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });

  panorama.addListener('zoom_changed', function() {
    var zoomCell = document.getElementById('zoom-cell');
    zoomCell.firstChild.nodeValue = panorama.getZoom();
  });


}
google.maps.event.addDomListener(window, "load", initPano);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#pano {
  width: 50%;
  height: 100%;
  float: left;
}
#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="pano"></div>
<div id="floating-panel">
  <table>
    <tr>
      <td><b>Position</b>
      </td>
      <td id="position-cell">&nbsp;</td>
    </tr>
    <tr>
      <td><b>POV Heading</b>
      </td>
      <td id="heading-cell">270</td>
    </tr>
    <tr>
      <td><b>POV Pitch</b>
      </td>
      <td id="pitch-cell">0.0</td>
    </tr>
    <tr>
      <td><b>Zoom</b>
      </td>
      <td id="zoom-cell">1</td>
    </tr>
    <tr>
      <td><b>Pano ID</b>
      </td>
      <td id="pano-cell">&nbsp;</td>
    </tr>
    <table id="links_table"></table>
  </table>
</div>