gpt4 book ai didi

javascript - Google Maps API——添加简单的左转、右转等按钮

转载 作者:行者123 更新时间:2023-11-28 02:40:29 25 4
gpt4 key购买 nike

我正在使用使用 JavaScript/HTML 的 Google Maps API。我正在尝试添加简单的按钮。如果用户按下这些按钮,它将在 map 上左转、右转等。但是,我的函数 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 });
}

最佳答案

Panorama 是一个局部变量,不能用于 changeHeading() 函数。做两件事:

  1. 在函数外部定义 var panorama = null; 作为全局变量。
  2. 从“var panorama = new google.maps.StreetViewPanorama(...”中删除 var,这样它就不会创建新的局部变量,而是使用全局变量.

关于javascript - Google Maps API——添加简单的左转、右转等按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44853211/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com