Javascript GoogleMapsAPI——添加向左、向右等简单按钮_Javascript_Html_Google Maps_Button_Onclick

Javascript GoogleMapsAPI——添加向左、向右等简单按钮

javascript html google-maps button

Javascript GoogleMapsAPI——添加向左、向右等简单按钮,javascript,html,google-maps,button,onclick,Javascript,Html,Google Maps,Button,Onclick,我正在使用GoogleMapsAPI，使用JavaScript/HTML。我正在尝试添加简单的按钮。如果用户按下这些按钮，它将在地图上向左、向右等。但是，正在调用我的函数changeHeading，但在调用之后不会执行它。有什么问题 <head> <meta charset="utf-8"> <title>Street View Add Third Panel</title> <style>

我正在使用GoogleMapsAPI，使用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 });
    }


街景添加第三个面板
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
浮动：左；
身高：50%；
宽度：50%；
}
#帕诺{
宽度：100%；
身高：50%；
}
#浮动面板{
浮动：对；
宽度：50%；
身高：50%；
}
位置
POV头270
POV 0.0
全景ID
函数初始化（）{
var fenway={lat:42.345573，lng:-71.098326}；
var map=new google.maps.map（document.getElementById（'map'）{
中心：芬威，
缩放：14
});
var panorama=新建google.maps.StreetViewPanorama(
document.getElementById（'pano'）{
位置：芬威，
pov：{
标题：34，
投球：10
}
});
地图设置树视图（全景）；
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（链接中的变量i）{
var行=document.createElement（'tr'）；
linksTable.appendChild（行）；
var-labelCell=document.createElement（'td'）；
labelCell.innerHTML='Link:'+i+''；
var valueCell=document.createElement（'td'）；
valueCell.innerHTML=链接[i]。说明；
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+''；
});
}
函数更改标题（增量）{
heading=panorama.getPov（）.heading；
全景.setPov（{heading:heading+delta}）；
}

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

定义var panorama=null；外部函数作为全局变量

从“var panorama=new google.maps.StreetViewPanorama（…”中删除var，这样它就不会创建新的局部变量，而是使用全局变量

两个问题：

panorama是一个局部变量，因此无法在button onclick函数（在全局范围内运行）中访问。您可以在定义panorama的范围内使用

google.maps.event.addDomListener

函数来修复此问题

设置POV时，需要使用POV对象来设置它（否则会出现javascript错误

InvalidValueError:setPov:in属性pitch:not a number

）

（内部

initMap

）：

代码片段：

函数初始化（）{
var fenway={
纬度：42.345573，
液化天然气：-71.098326
};
var map=new google.maps.map（document.getElementById（'map'）{
中心：芬威，
缩放：14
});
var panorama=新建google.maps.StreetViewPanorama(
document.getElementById（'pano'）{
位置：芬威，
pov：{
标题：34，
投球：10
}
});
地图设置树视图（全景）；
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（链接中的变量i）{
var行=document.createElement（'tr'）；
linksTable.appendChild（行）；
var-labelCell=document.createElement（'td'）；
labelCell.innerHTML='Link:'+i+''；
var valueCell=document.createElement（'td'）；
valueCell.innerHTML=链接[i]。说明；
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 headingCe
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);
}