javascript - Google Street View API - 捕捉缩放变化

Question

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

Street View Events

When navigating between Street View or manipulating its orientation,you may wish to monitor several events that indicate changes to theStreetViewPanorama's state:

pano_changed fires whenever the individual pano ID changes. This event does not guarantee that any associated data within the panorama(such as the links) has also changed by the time this event istriggered; this event only indicates that a pano ID has changed. Notethat the pano ID (which you can use to reference this panorama) isonly stable within the current browser session.

position_changed fires whenever the underlying (LatLng) position of the panorama changes. Rotating a panorama will not trigger thisevent. Note that you could change a panorama's underlying positionwithout changing the associated pano ID, since the API willautomatically associate the nearest pano ID to the panorama'sposition.

pov_changed fires whenever the Street View's StreetViewPov changes. Note that this event may fire while the position, and panoID, remain stable.

links_changed fires whenever the Street View's links change. Note that this event may fire asynchronously after a change in the pano IDindicated through pano_changed.

visible_changed fires whenever the Street View's visibility changes. Note that this event may fire asynchronously after a changein the pano ID indicated through pano_changed.

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

Answer 1

使用 zoom_changed 事件。

from the documentation (在“事件”下):

zoom_changed | Arguments: None

This event is fired when the panorama's zoom level changes.

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

proof of concept fiddle

代码片段:

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>