0

首先。找了很久，还是没有找到我想要的！如何获得下一张全景图？我所知道的只是需要获得全景链接。链接可以用getLinks();. 我已经阅读了谷歌的街景手册，但我想使用自己的导航按钮而不是谷歌的导航按钮！

4

2 回答 2

4

下面是Google Maps Javascript API v3 streetview-events 示例的修改版本，其中添加了通过链接导航街景全景的按钮。

在全球范围内：

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

工作示例

完整代码：

<!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>
于 2013-10-18T00:56:12.327 回答
0
  • 转到此链接：https ://developers.google.com/maps/documentation/embed/start
  • 转到谷歌地图并在您的浏览器中进入您想要的位置的街景模式
  • 点击“分享.. ”
  • 在该超链接字符串(CTRL-F/CMD-F) 中搜索“ !2e ”，然后将字符串从“ ! ”之后的第一个字母复制到“ !1s ”中“ s ”之后的第一个字母。

例子：

!1s -SWqF6BeQEBI%2FWBXbp08W9pI%2FAAAAAAAACRo%2F17TZj7OS3OMBBkrcNfZ45YlZxGydVryDwCLIB !2e

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

  • 现在返回第一个项目符号中给出的链接，然后单击选项卡“显示街景或自定义全景图”
  • 将新复制的字符串粘贴到“自定义全景 ID： ”字段中，然后按Enter
  • 现在输入您的 API 密钥；请记住将正确的 API 密钥添加到为全景/街景制作的 API 项目中！（Google Maps Embed API；您可以为您的项目添加多个密钥）如果您还没有，请单击“获取密钥”

就是这样！

您将获得一个个人 HTML 代码，您可以直接将其粘贴到您的 HTML 文档中。这是在我写这篇文章的日期经过测试和工作的。

于 2016-12-14T01:21:38.140 回答