Google地图Panorama Street View放大和缩小但没有可用的事件

Question

当用户按下嵌入在街景全景图中的放大或缩小按钮时，我想设置街景全景的俯仰角度，但是当我滚动鼠标Midlle滚轮（滚动）时，没有触发任何事件。

在Google的官方文档中

https://developers.google.com/maps/documentation/javascript/examples/streetview-events

使用这些按钮无法更新音高。

是否有解决方法来实现这一目标？

谢谢

Answer 1

zoom_changed事件对我有用：

panorama.addListener('zoom_changed', function() {
  console.log(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('zoom_changed', function() {
    var zoomCell = document.getElementById('zoom-cell');
    zoomCell.innerHTML = panorama.getZoom();
    console.log(panorama.getZoom());
  });

  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 + '';
  });
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

<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>Zoom</b></td>
      <td id="zoom-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>Pano ID</b></td>
      <td id="pano-cell">&nbsp;</td>
    </tr>
    <table id="links_table"></table>
  </table>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initPano">
</script>