Question

我有一个动态页面，根据ID提取不同的位置。我有三个标签，一个用于位置描述，谷歌地图和一个用于街景。一切正常 - 我遇到的问题是，当没有街景时，它会显示一个灰色的框。

我以为我通过使用'getPanoramaByLocation'找到了解决方案，但我似乎无法使其正常工作。这就是我所拥有的：

var WINDOW_HTML = '<div style="width: 200px; overflow: hidden; word-wrap:break-word;"><p><?php echo htmlspecialchars($title); ?><br /><?php echo htmlspecialchars($locationDetails); ?></p></div>';
    var map = '';
    var myLatlng;

    /* Check if Streetview is available */
    var latLng = new google.maps.LatLng(<?php echo htmlspecialchars($lat.','.$lon); ?>);                      

    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;
            }
    });        

    function initialize() {                 
        myLatlng = new google.maps.LatLng(<?php echo htmlspecialchars($lat.','.$lon); ?>);
        var mapOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('themap'), mapOptions);

        /* Street view addition */                   
        if (streetViewAvailable == 1) {                
            var panoramaOptions = {
            position: myLatlng,
            pov: {
              heading: 34,
              pitch: 10
            },
            visible:true
            };
             var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);                     
            map.setStreetView(panorama);
            alert('Street View Available'); 
        } else {  
            /* Hide the street view tab if it isn't available */
            $('#svTab').hide(); 
            alert('Street View NOT Available');                
        }           

        /* Resize Fix for tabs */
        google.maps.event.addListener(map, 'resize', function() {
            this.setZoom(13);
            this.setCenter(myLatlng);
            var infowindow = new google.maps.InfoWindow({
                content: WINDOW_HTML
            });
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });            
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });                
            infowindow.open(map,marker);
        }); 
        // Tab fix for streetview refresh  
          $('#svTab').on('shown', function (e) {
            $('#pano').show();                   
            panorama.setVisible(true);  

        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

我尝试了很多不同的东西，我似乎得到了不同的结果 - 我似乎有一个设置正在工作，但是当我因某种未知原因刷新页面时，它会说我的'streetViewAvailable'没有被定义（好像它没有通过我的streetViewCheck函数运行）。

Answer 1

最后设法搞清楚了。我不得不删除“街景视频”＆＃39;变量，而是将一个函数放在streetviewstatus if语句中。这就是它最终看起来像什么。

var WINDOW_HTML = '<div style="width: 200px; overflow: hidden; word-wrap:break-word;"><p><?php echo htmlspecialchars($title); ?><br /><?php echo htmlspecialchars($locationDetails); ?></p></div>';
    var map = '';
    var myLatlng;                     

    function initialize() {                 
        myLatlng = new google.maps.LatLng(<?php echo htmlspecialchars($lat.','.$lon); ?>);
        var mapOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('themap'), mapOptions);


        /* Resize Fix for tabs */
        google.maps.event.addListener(map, 'resize', function() {
            this.setZoom(13);
            this.setCenter(myLatlng);
            var infowindow = new google.maps.InfoWindow({
                content: WINDOW_HTML
            });
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });            
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });                
            infowindow.open(map,marker);
        }); 

        /* Check Streetview is available */
        var streetViewService = new google.maps.StreetViewService();
        var STREETVIEW_MAX_DISTANCE = 50;

        streetViewService.getPanoramaByLocation(myLatlng, STREETVIEW_MAX_DISTANCE, function (streetViewPanoramaData, status) {
            if (status === google.maps.StreetViewStatus.OK) {                   
                function svcheck() {                                                       
                    var panoramaOptions = {
                        position: myLatlng,
                        pov: {
                          heading: 34,
                          pitch: 10
                        },
                        visible:true
                    }
                    var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);                    
                    map.setStreetView(panorama); 

                    // Tab fix for streetview refresh  
                    $('#svTab').on('shown', function (e) {
                        $('#pano').show();                   
                        panorama.setVisible(true);                              
                    });
                }
                svcheck();
            } else {
                /* Street view is unavailable - HIDE THE TAB! */
                $('#svTab').hide(); 
            }
        });

    }
    google.maps.event.addDomListener(window, 'load', initialize);

仅在可用时显示谷歌街景

1 个答案: