我在使用visible_changed监听器时遇到了一些问题，希望我正确使用它......
基本上，我想做的是，当您将街景小人放在 map 上时，寻找最近的标记，并将街景指向那里。我只希望每次加载街景时都会发生这种情况，所以我想我可以使用visible_changed监听器捕获它。问题是，每次街景相机位置发生变化时，这似乎也会触发，而不是仅在每次街景窗口变得可见时触发。我只是做错了吗？我应该捕获不同的监听器事件吗？
// Street View Events
var thePanorama = map.getStreetView();
google.maps.event.addListener(thePanorama, 'visible_changed', function() {
if (thePanorama.getVisible()) {
//Street view loads
//enlarge markers to make them show betetr in street view
for (var i=0; i<gmarkers.length; i++) {
var oldIcon = gmarkers[i].getIcon();
var newIcon = {url: oldIcon.url, scaledSize: new google.maps.Size(60, 102)};
gmarkers[i].setIcon(newIcon);
}
//Get nearest visible marker
var nearestMarker = gmarkers.reduce(function (prev, curr) {
if (curr.getVisible()) {
var cpos = google.maps.geometry.spherical.computeDistanceBetween(thePanorama.position, curr.position);
var ppos = google.maps.geometry.spherical.computeDistanceBetween(thePanorama.position, prev.position);
return cpos < ppos ? curr : prev;
}
else{
return prev;
}
})
var path = [thePanorama.getPosition(), nearestMarker.getPosition()];
var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
//point the street view heading
thePanorama.setPov({
heading: heading,
pitch: 0
});
}
else{
//Street view unloaded, return markers to original size
alert(thePanorama.getVisible())
for (var i=0; i<gmarkers.length; i++) {
var oldIcon = gmarkers[i].getIcon();
var newIcon = {url: oldIcon.url, scaledSize: new google.maps.Size(20, 34)};
gmarkers[i].setIcon(newIcon);
}
}
})这是一个包含最少代码的更新 - 我希望每次加载或卸载街景时都会触发此事件，但每次街景相机更改位置时也会触发该事件。有没有办法只捕获街景加载和卸载？
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
//This event is also firing when the POV camera moves, and shouldn't be.
google.maps.event.addListener(map.getStreetView(),'visible_changed',function(){
alert('streetview is ' +(this.getVisible()?'open':'closed'));
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>最佳答案
根据documentation :
visible_changed fires whenever the Street View's visibility changes. Note that this event may fire asynchronously after a change in the pano ID indicated through pano_changed.
但这并不能阻止您仅过滤打开和关闭事件。您可以保留街景的先前可见性状态，并仅在当前状态与先前状态不同时触发事件。给你:
window.initMap = function () {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var isVisible = false;
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function() {
var visible = this.getVisible();
if (isVisible != visible) {
alert('streetview is ' + (visible ? 'open' : 'closed'));
}
isVisible = visible;
});
}#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>关于javascript - Google Maps Api StreetView 事件visible_changed，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40288780/