Google MapsV3 街景问题 - 如果街景不可用则无法工作

Question

我们有一个标准地图（MapTypeId.ROADMAP），上面有一个标记。地图上方有一个按钮，上面写着“显示街景”。如果用户单击它，它会在标记的位置（在同一 div 中）加载 StreetView。该按钮将更改为“隐藏街景”，如果单击，地图将恢复为标准路线图。显然，用户还可以使用“街景小人”来模拟相同的行为。

当标记位置没有可用的实际街景时，问题就开始了。我们使用事件侦听器处理此问题，如果没有可用的街景，则会显示一条消息通知用户，并返回 false 以防止“显示”不存在的街景。效果很好，除了当用户尝试使用“街景小人”时 - 因为我们已经加载（但未显示）街景（不存在）。当用户第一次将街景小人放到地图上时，什么也没发生，但我们的“显示/隐藏按钮”发生了变化。在街景小人的第二次下降中，它更改为街景，但我们的“显示/隐藏按钮”现在不正常了（它已经存在时显示“显示街景”，而在路线图上时显示“隐藏街景”。

我们尝试更改我们的代码结构 - streetview (var panorama = ...) 仅通过我们的显示/隐藏上的“onclick”javascript 函数进行初始化（它最初与“loadMap”函数捆绑在一起，现在它已被分离到另一个函数）按钮 - 如果街景可用，请对其进行重大更改并更改按钮，如果不返回 false 并向用户显示消息，这效果很好，但现在如果用户使用“街景小人”转到街景，则按钮不会更改，因为它。已被分离到另一个函数中。

我已经尝试了三天的各种选项，但我无法弄清楚如何在“loadMap”函数中监听“通过街景小人删除更改街景”。 （请参阅下面 loadMap 代码中的“visible_changed”事件侦听器） - 如果我能弄清楚这一点，我就可以更改按钮显示，但我一生都无法弄清楚（研究了 DOM 突变以侦听街景的显示，但不太“跨浏览器友好”，这一点很重要，因为该网站每月的点击量超过 400 万次）。

这是“loadMap”函数

function loadGMap(lat, lng, nachladenAnzeigen, radialConflict){
// Create the Map variables 
 mapDiv = document.getElementById('map');
 width = parseInt(mapDiv.style.width);
 height = parseInt(mapDiv.style.height);
 latlng = new google.maps.LatLng(lat, lng);

// Create Map
var mapOptions = {
  zoom: 14,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false,
  panControl: false
};
map = new google.maps.Map(mapDiv,mapOptions);


... Code here for laying marker to map...

google.maps.event.addListener(map, 'visible_changed', function(){
        alert('please work');
                    // It doesn't - no alert when pegman is dropped :-(
}

// Check for a street view at the marker position
var streetViewCheck = new google.maps.StreetViewService();  
streetViewCheck.getPanoramaByLocation(latlng, 50, function(result, status) {
    if (status == google.maps.StreetViewStatus.ZERO_RESULTS) {
        streetViewAvailable = 0;        
    }else{
        streetViewAvailable = 1;
    }
});
... more code (event listeners, ie, zoom changed, etc...

，这是通过地图上方的“显示/隐藏街景”按钮上的“onclick”操作调用的 loadStreetView 函数（并不是说我认为您需要这个，它对于此用途来说一切正常）案例，该死的街景小人掉落不起作用，但你永远不知道......）

function loadStreetView(){
// Make 'Show/Hide StreetView' links above the map work     
    // Handle the toggle of StreetView 'button' display
    if(streetViewAvailable == 0){
        noStreetViewVariable = document.getElementById('noStreetView');
        noStreetViewVariable.style.display = "inline";
        return false;
    }else{ 
        panorama = map.getStreetView();
        panorama.setPosition(latlng);
        panorama.setPov({
            heading: 265,
            zoom:1,
            pitch:0
        });

        var toggle = panorama.getVisible();
        if (toggle == false) {
            panorama.setVisible(true);
            $('#button_streetview').attr("src", 'img/buttons/mapview.png');
        } else {
            panorama.setVisible(false);
            $('#button_streetview').attr("src", 'img/buttons/streetview.png');
        }
    }

    google.maps.event.addListener(panorama, 'visible_changed', function(){
        if(streetViewAvailable == 0){
            $('#button_streetview').attr("src", 'img/buttons/mapview.png');
        }
        else if(streetViewAvailable == 1){
            if (panorama.getVisible() == true ) {

                $('#button_streetview').attr("src", 'img/buttons/mapview.png');
            }
        }
    });

    google.maps.event.addListener(panorama, 'closeclick', function() {
        $('#button_streetview').attr("src", 'img/buttons/streetview.png');
    });
}

Answer 1

“visible_changed”的事件侦听器位于地图对象上，而不是全景图上。 Map 对象 (v3) 没有“visible_changed”事件。

我的解决方案（对我有用......）是：

var pano = null ; // on initialize  I use this in the global scope, bad, I know... <br>
var map = null ; // likewise <br>

function init(); <br>
    map = new google.maps.Map(document.getElementById('map'),
        MapOptions ); <br>
    createPano() ; <br>
    ... other init stuff here .. <br>
}

function createPano() { <br>
    if ( pano == null ) { <br>
    pano = map.getStreetView();  //  the api says this creates the default pano object..
<br>    }

           google.maps.event.addListener(pano, "visible_changed",
        function(){ <br>
        alert("position is " + pano.getPosition() ) ; <br>
        // change this to getPanoAndSwitch() when custom panos are available ..
<br>        panoFlag = pano.getVisible();

...
      rest of code here. 

至少，这就是我的样子。