Question

我使用Google Maps API，使用JavaScript / HTML。我试图添加简单的按钮。如果用户按下这些按钮，它将在地图上左转，右转等。但是，我的函数changeHeading被调用，但在调用之后不执行。问题是什么？

<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: 50%;
            }
        </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>
            <tr>
                <input type="button" value="Turn Left" onclick="changeHeading(-5);">
            </tr>
            <tr>
                <input type="button" value="Turn Right" onclick="changeHeading(-5);">
            </tr>
            <tr>
                <input type="button" value="Go Forward" onclick="changeHeading(-5);">
            </tr>
            <tr>
                <input type="button" value="Go Backward" onclick="changeHeading(-5);">
            </tr>
            <table id="links_table"></table>
        </table></div>



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

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


    }

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

Answer 1

Panorama是一个局部变量，不适用于changeHeading（）函数。做两件事：

将函数外部的 var panorama = null; 定义为全局变量。
从＆＃34; var panorama = new google.maps.StreetViewPanorama（... ＆＃34;中删除 var ，因此它不会创建新的局部变量而是使用全局的。

Answer 2

两个问题：

panorama是一个局部变量，因此无法在按钮onclick函数（在全局范围内运行）中访问。您可以使用定义范围内的google.maps.event.addDomListener函数来解决此问题。
设置POV时，需要使用POV对象进行设置（否则会出现javascript错误InvalidValueError: setPov: in property pitch: not a number）

（在initMap内）：

google.maps.event.addDomListener(document.getElementById("left"),'click', function() {changeHeading(-5)});
google.maps.event.addDomListener(document.getElementById("right"),'click', function() {changeHeading(5)});

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

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(-5)
  });
  google.maps.event.addDomListener(document.getElementById("right"), 'click', function() {
    changeHeading(5)
  });

  function changeHeading(delta) {
    var heading = panorama.getPov().heading;
    var POV = panorama.getPov();
    POV.heading = heading + delta;
    panorama.setPov(POV);
  }
}
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?libraries=geometry"></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" onclick="changeHeading(-5);">
    </tr>
    <tr>
      <input type="button" id="right" value="Turn Right" onclick="changeHeading(5);">
    </tr>
    <table id="links_table"></table>
  </table>
</div>



<div id="pano"></div>

谷歌地图API - 添加简单的按钮左转，右转等

2 个答案: