Question

首先。我很长一段时间都在寻找，但我找不到我想要的东西！我怎样才能获得下一张全景图？所有我所知道的都需要获得全景链接。链接可以通过getLinks();获得。我已阅读谷歌的街景手册，但我想用自己的导航按钮导航而不是谷歌！

Answer 1

以下Google Maps Javascript API v3 streetview-events example的修改版本添加了按钮，可通过链接导航街景全景图。

在全球范围内：

var panorama = null;
var links = null;

function setPano2link(i) {
  panorama.setPano(links[i].pano);
  panorama.setPov({heading:links[i].heading,pitch:0});
  panorama.setVisible(true);
}

修改“links_changed”事件处理程序以添加导航按钮：

  google.maps.event.addListener(panorama, 'links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while(linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      };
      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;
        var btnCell = document.createElement('td');
        btnCell.innerHTML = '<input type="button" value="goto" onclick="setPano2link('+i+')"></input>';
        var panoIdCell = document.createElement('td');
        panoIdCell.innerHTML = links[i].pano;
        var headingCell = document.createElement('td');
        headingCell.innerHTML = links[i].heading;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
        linksTable.appendChild(btnCell);
        linksTable.appendChild(panoIdCell);
        linksTable.appendChild(headingCell);
      }
  });

working example

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View events</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var cafe = new google.maps.LatLng(37.869085,-122.254775);
var panorama = null;
var links = null;

function setPano2link(i) {
  panorama.setPano(links[i].pano);
  panorama.setPov({heading:links[i].heading,pitch:0});
  panorama.setVisible(true);
}

function initialize() {

  var panoramaOptions = {
    position: cafe,
    pov: {
      heading: 270,
      pitch: 0
    },
    visible: true
  };
  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);

  google.maps.event.addListener(panorama, 'pano_changed', function() {
      var panoCell = document.getElementById('pano_cell');
      panoCell.innerHTML = panorama.getPano();
  });

  google.maps.event.addListener(panorama, 'links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while(linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      };
      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;
        var btnCell = document.createElement('td');
        btnCell.innerHTML = '<input type="button" value="goto" onclick="setPano2link('+i+')"></input>';
        var panoIdCell = document.createElement('td');
        panoIdCell.innerHTML = links[i].pano;
        var headingCell = document.createElement('td');
        headingCell.innerHTML = links[i].heading;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
        linksTable.appendChild(btnCell);
        linksTable.appendChild(panoIdCell);
        linksTable.appendChild(headingCell);
      }
  });


  google.maps.event.addListener(panorama, 'position_changed', function() {
      var positionCell = document.getElementById('position_cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  google.maps.event.addListener(panorama, '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 + '';
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="pano" style="width: 45%; height: 100%;float:left"></div>
    <div id="panoInfo" style="width: 45%; height: 100%;float:left">
    <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>Pano ID</b></td><td id="pano_cell">&nbsp;</td>
      </tr>
      <table id="links_table"></table>
    </table>
    </div>
  </body>
</html>

Answer 2

转到此链接：https://developers.google.com/maps/documentation/embed/start
转到Google地图，然后在浏览器中的所需位置输入街景模式
点击“分享.. ”
在！2e 中搜索超链接字符串（CTRL-F / CMD-F），并从复制字符串 “！”之后的第一个字母到“！1s ”中“ s ”之后的第一个字母。

<强> 实施例

<强>！1S   -SWqF6BeQEBI％2FWBXbp08W9pI％2FAAAAAAAACRo％2F17TZj7OS3OMBBkrcNfZ45YlZxGydVryDwCLIB   的！2E

如果HTML字符串中有任何“％2F ”，则需要将其替换为“ / ”。如果您在开始时有“ - ” - 符号，则需要将其替换为   “的 F： - ”。

现在返回第一个项目符号中的链接，然后点击“显示街景视图或自定义全景图”标签

将新复制的字符串放入“自定义全景ID：”字段，然后按输入

现在输入您的API密钥;请记住将正确的API密钥添加到为全景/街景制作的API项目中！（Google Maps Embed API;您可以为项目添加多个密钥）如果您还没有
，请点击“获取密钥”

就是这样！

您将获得一个可以直接传递给您HTML文档的个人HTML代码。这是经过测试的，并且在我写这篇文章的日期起作用。

Google MAP API V3 - 街景视图下一个全景链接

2 个答案: