Google街景API - 捕捉缩放变化

Question

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

  

街景活动

     

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

     单个全景ID更改时，

pano_changed 将触发。此事件不保证全景图中的任何关联数据   （例如链接）在此事件发生时也已更改   触发;此事件仅表示全景ID已更改。注意   pano ID（可用于引用此全景图）是   只在当前浏览器会话中稳定。

     只要全景图的基础（LatLng）位置发生变化，

position_changed 就会触发。旋转全景图不会触发此操作   事件。请注意，您可以更改全景图的基础位置   不会更改关联的pano ID，因为API会   自动将最近的全景ID与全景图相关联   位置。

     每当街景视图的StreetViewPov发生变化时，

pov_changed 就会触发。请注意，此事件可能会在位置和平移时触发   ID，保持稳定。

     只要街景视图的链接发生变化，就会触发

links_changed 。请注意，在更改全局ID后，此事件可能会异步触发   通过pano_changed表示。

     每当街景视图的可见性发生变化时，

visible_changed 就会触发。请注意，此更改后可能会异步触发此事件   通过pano_changed表示的全景ID。

所以，我可以捕捉到改变panoID，位置，航向，音高，但找不到改变变焦的方法。怎么做？

Answer 1

使用zoom_changed事件。

from the documentation（＆＃34;活动＆＃34;）：

  

zoom_changed |参数：无

     

全景变焦等级发生变化时会触发此事件。

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

proof of concept fiddle

代码段

＆＃13;

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;