Google Maps API街景视图 - 添加简单按钮以移动前进

时间：2017-07-02 20:20:52

标签： javascript html google-maps google-street-view

我正在使用街景视图添加一个简单的按钮以在地图上向前移动。例如，如果用户按下“前进”按钮，它将抓取最近的全景ID并移动到该全景。请查看getForwardLink（），getLinkDifference（）和moveForward（）。我做错了什么？ 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Street View Add Third Panel</title>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map {
                float: left;
                height: 50%;
                width: 50%;
            }
            #pano {
                width: 100%;
                height: 50%;
            }
            #floating-panel {
                float: right;
                width: 50%;
                height: 20%;
            }
        </style>
    </head>
    <body>
        <div id="map"></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>Pano ID</b></td><td id="pano-cell">&nbsp;</td>
            </tr>
        </table></div>
        <p>
            Push some buttons to explore Maps!
        </p>
        <div id="floating-panel">
        <table>
            <tr>
                <input type="button" value="Turn Left" onclick="changeHeading(-90);">
            </tr>
            <tr>
                <input type="button" value="Turn Right" onclick="changeHeading(90);">
            </tr>
            <tr>
                <input type="button" value="Go Forward" onclick="moveForward();">
            </tr>
            <tr>
                <input type="button" value="Go Backward" onclick="changeHeading(-5);">
            </tr>
            <table id="links_table"></table>
        </table></div>



        <div id="pano"></div>
    <script>

    var panorama = null; 

    function initialize() {
        var fenway = {lat: 42.345573, lng: -71.098326};
        var map = new google.maps.Map(document.getElementById('map'), {
            center: fenway,
            zoom: 14
        });
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('pano'), {
                position: fenway,
                pov: {
                    heading: 34,
                    pitch: 10
                }
            });
        map.setStreetView(panorama);

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


    }

    function changeHeading( delta ) {
        var heading = panorama.getPov().heading;
        var POV = panorama.getPov(); 
        POV.heading = heading + delta; 
        panorama.setPov(POV); 

    }

    function getForwardLink() {
        var pov = panorama.getPov();
        var links = panorama.getLinks();
        var len = links.length;
        var nearest = null;     // pano id closest to facing
        var nearest_difference = 360;

        for(var i=0; i<len; i++) {
            var link = links[i];
            var difference = getLinkDifference(pov.heading, link.heading);
            console.log(difference, link);
            if (difference < nearest_difference) {
                nearest = link;
                nearest_difference = difference;
            } 
        }

        return nearest;
    }

    function getLinkDifference(pov_heading, link_heading) {
        var diff = Math.abs(link_heading - pov_heading) % 360;

        return diff >= 180 ? diff - (diff - 180) * 2 : diff;
    }

    function moveForward(){
        var nearestPanoID = getForwardLink(); 
        panorama.setPano(nearestPanoID); 
        panorama.setVisible(true); 
    }

1 个答案:

答案 0 :(得分：0)

我的代码出现javascript错误：InvalidValueError: setPano: not a string，getForwardLink没有返回panoId（字符串），它返回link（对象）：

  

google.maps.StreetViewLink 对象规格
  

<小时/>   相邻街景全景图的参考集合。   的属性
  说明 |类型：字符串
  描述链接的本地化字符串   标题 |类型：编号
  链接的标题。
  全景 |类型：字符串
  全景图的唯一标识符。此ID在会话中稳定，但在会话期间不稳定。

你需要“全景”：

如果我修改getForwardLink以从pano（这是一个字符串）返回link属性，它对我有效。

function getForwardLink() {
  var pov = panorama.getPov();
  var links = panorama.getLinks();
  var len = links.length;
  var nearest = null; // pano id closest to facing
  var nearest_difference = 360;
  for (var i = 0; i < len; i++) {
    var link = links[i];
    var difference = getLinkDifference(pov.heading, link.heading);
    if (difference < nearest_difference) {
      // set nearest to the pano string required, rather than the object
      // ... unless you need the other properties of the object for some reason 
      nearest = link.pano;
      nearest_difference = difference;
    }
  }
  return nearest;
}

proof of concept fiddle

代码段 

function initialize() {
  var fenway = {
    lat: 42.345573,
    lng: -71.098326
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10
      }
    });
  map.setStreetView(panorama);

  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 + '';
  });
  google.maps.event.addDomListener(document.getElementById("left"), 'click', function() {
    changeHeading(-90);
  });
  google.maps.event.addDomListener(document.getElementById("right"), 'click', function() {
    changeHeading(90);
  });
  google.maps.event.addDomListener(document.getElementById("fwd"), 'click', function() {
    moveForward();
  });

  function changeHeading(delta) {
    var heading = panorama.getPov().heading;
    var POV = panorama.getPov();
    POV.heading = heading + delta;
    panorama.setPov(POV);
  }

  function getForwardLink() {
    var pov = panorama.getPov();
    var links = panorama.getLinks();
    var len = links.length;
    var nearest = null; // pano id closest to facing
    var nearest_difference = 360;

    for (var i = 0; i < len; i++) {
      var link = links[i];
      var difference = getLinkDifference(pov.heading, link.heading);
      if (difference < nearest_difference) {
        nearest = link.pano;
        nearest_difference = difference;
      }
    }

    return nearest;
  }

  function getLinkDifference(pov_heading, link_heading) {
    var diff = Math.abs(link_heading - pov_heading) % 360;
    return diff >= 180 ? diff - (diff - 180) * 2 : diff;
  }

  function moveForward() {
    var nearestPanoID = getForwardLink();
    panorama.setPano(nearestPanoID);
    panorama.setVisible(true);
  }
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  float: left;
  height: 50%;
  width: 50%;
}

#pano {
  width: 100%;
  height: 50%;
}

#floating-panel {
  float: right;
  width: 50%;
  height: 50%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></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>Pano ID</b></td>
      <td id="pano-cell">&nbsp;</td>
    </tr>
    <tr>
      <input type="button" id="left" value="Turn Left">
    </tr>
    <tr>
      <input type="button" id="right" value="Turn Right">
    </tr>
    <tr>
      <input type="button" id="fwd" value="Go Forward">
    </tr>
    <table id="links_table"></table>
  </table>
</div>



<div id="pano"></div>

相关问题
最新问题