谷歌街景 API - 捕捉缩放变化

Google Street View API - catch zoom changing

本文关键字：缩放 变化 API 谷歌街      更新时间：2023-09-26

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

街景活动

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

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

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

每当街景

的街景Pov发生变化时，pov_changed就会触发。请注意，此事件可能会在位置和 panoID，保持稳定。

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

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

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

使用 zoom_changed 事件。

从文档(在"事件"下(：

zoom_changed |参数：无

当全景图的缩放级别更改时，将触发此事件。

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

概念验证小提琴

代码片段：

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>

相关文章：