gpt4 book ai didi

javascript - Google Maps Api StreetView 事件 visible_changed

转载 作者:行者123 更新时间:2023-11-30 15:44:30 27 4
gpt4 key购买 nike

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

}

})

这是一个代码最少的更新 - 我希望每次加载或卸载街景 View 时都会触发此事件,但它也会在每次街景摄像头改变位置时触发。有什么方法可以只捕获街景加载和卸载吗?

<!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>

Fiddle

关于javascript - Google Maps Api StreetView 事件 visible_changed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40288780/

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