谷歌地圖街景瓷磚不加載在Firefox最初，只有拖動後

我有一個谷歌地圖streetview（在引導主題，如果這與它有關）的問題。谷歌地圖街景瓷磚不加載在Firefox最初，只有拖動後

我設置了街景，只需點擊一下按鈕即可看到，它可以在IE和Chrome中正常工作，但在Firefox中，街景保持灰色（即不加載初始圖塊），直到您將視圖一個鼠標。

我創建了一個關於它的小提琴，試試你的自我，並驚奇地發現：

任何人有一個猜測，爲什麼會出現這種情況？

編輯：現在，當我在小提琴中嘗試它，瓷磚根本不加載所有的Firefox，加載罰款鉻。在我真實的環境中，首次拖動視圖後，也會在Firefox中加載圖塊。

編輯2：瓷磚根本沒有在小提琴中顯示，因爲我忘了添加樣式來解決引導與谷歌地圖畫布混亂。我在CSS中添加了「.map-canvas img」規則，現在它顯示了最初的問題。瓷磚不會加載，直到在Firefox中拖動街景。更新上面的小提琴鏈接。

下面是來自小提琴

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Google maps streeview issue - jsFiddle demo</title> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 


    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 



     <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> 




     <script type='text/javascript' src="http://maps.google.com/maps/api/js?v=3.11&sensor=false&foo=.js"></script> 


    <style type='text/css'> 
    @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

.map-canvas img { 
    border: none !important; 
    max-width: none !important; 
} 

.panorama-activated-map-canvas { 
    width: 50%; 
    float:left; 
    -webkit-border-top-left-radius: 6px; 
    -moz-border-top-left-radius: 6px; 
    border-top-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -moz-border-bottom-left-radius: 6px; 
    border-bottom-left-radius: 6px; 
} 

.panorama-activated-panorama-canvas { 
    width: 50%; 
    float:left; 
    -webkit-border-top-right-radius: 6px; 
    -moz-border-top-right-radius: 6px; 
    border-top-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -moz-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px; 
} 

.panorama-disabled-map-canvas { 
    width: 100%; 
    border-radius: 6px 6px 6px 6px; 
} 

.panorama-disabled-panorama-canvas { 
    display: none; 
} 
    </style> 



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
var data = "{success:true, data:{\"schoolMarker\":{\"lat\":62.759379214514,\"lng\":22.840391666132},\"polylines\":[{\"path\":[{\"lat\":62.768091219265,\"lng\":22.841507465082},{\"lat\":62.767678823231,\"lng\":22.841421634393},{\"lat\":62.767168229676,\"lng\":22.841292888361},{\"lat\":62.766569252889,\"lng\":22.840928107935},{\"lat\":62.765842608979,\"lng\":22.840456039148},{\"lat\":62.76528288457,\"lng\":22.839919597345},{\"lat\":62.764772249527,\"lng\":22.839576274591},{\"lat\":62.764340166815,\"lng\":22.839533359247},{\"lat\":62.764016100627,\"lng\":22.839490443903},{\"lat\":62.763623288351,\"lng\":22.839554816919},{\"lat\":62.762660876165,\"lng\":22.839919597345},{\"lat\":62.761885031233,\"lng\":22.840220004755},{\"lat\":62.761020774875,\"lng\":22.840498954492},{\"lat\":62.760303815724,\"lng\":22.840820819574},{\"lat\":62.759655591079,\"lng\":22.841035396295},{\"lat\":62.759439513032,\"lng\":22.840541869836}]}]}}"; 
var map = null; 
var schoolmarker = null; 
var polyBounds = null; 
var panorama = null; 
var streetViewService = null; 
var g = google.maps; 
var response = eval("(" + data + ")"); 
if (response.success) { 
    initMap('#map_canvas', '#panorama_canvas', response.data); 
} 
function initMap(mapSelector, panoramaSelector, data) { 
    var mapOptions = { 
     scrollwheel: false, 
     zoom: 5, 
     minZoom: 5, 
     streetViewControl: false, 
     mapTypeControl: false, 
     mapTypeControlOptions: { 
     mapTypeIds: [g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE] 
     }, 
     center: new g.LatLng(65.567, 25.303), 
     mapTypeId: g.MapTypeId.ROADMAP, 
     draggableCursor: 'auto', 
     draggingCursor: 'move', 
     disableDoubleClickZoom: true, 
     scaleControl: true 
    }; 
    map = new g.Map($(mapSelector).get(0), mapOptions); 
    mapSelector = null; 
    mapOptions = null; 

    schoolmarker = new google.maps.Marker({ 
     animation: g.Animation.DROP, 
     draggable: true, 
     icon: 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/dancinghall.png', 
     map: map, 
     position: new g.LatLng(data.schoolMarker.lat, data.schoolMarker.lng) 
    }); 

    polyBounds = new g.LatLngBounds(); 
    $.each(data.polylines, function(index, polyline) { 
     var path = []; 
     $.each(polyline.path, function(index, position) { 
      var point = new g.LatLng(position.lat, position.lng); 
      polyBounds.extend(point); 
      path.push(point); 
     }); 
     var polyLineObj = new g.Polyline({ 
      strokeColor: "#00BA03", 
      strokeOpacity: 0.8, 
      strokeWeight: 4, 
      path: path, 
      clickable: false 
     }); 
     polyLineObj.setMap(map); 
    }); 
    map.fitBounds(polyBounds); 
    map.setCenter(schoolmarker.getPosition()); 

    panorama = new google.maps.StreetViewPanorama($(panoramaSelector).get(0)); 
    panorama.setVisible(false); 
    streetViewService = new g.StreetViewService(); 
    map.setStreetView(panorama); 
    } 

$('#thebutton').click(function() { 
    $('#map_canvas').removeClass('panorama-disabled-map-canvas').addClass('panorama-activated-map-canvas'); 
    $('#panorama_canvas').removeClass('panorama-disabled-panorama-canvas').addClass('panorama-activated-panorama-canvas'); 
    g.event.trigger(map, 'resize'); 
    map.fitBounds(polyBounds); 
    map.setCenter(schoolmarker.getPosition()); 
    streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) { 
     if (status == google.maps.StreetViewStatus.OK) { 
      var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition()); 

      var panoOptions = { 
       position: panoramaData.location.latLng, 
       addressControl: false, 
       linksControl: false, 
       panControl: false, 
       zoomControlOptions: { 
       style: g.ZoomControlStyle.SMALL 
      }, 
      pov: { 
       heading: heading, 
       pitch: 10, 
       zoom: 2 
      }, 
      enableCloseButton: false, 
      visible:true 
      }; 
      panorama.setOptions(panoOptions); 
      g.event.trigger(panorama, 'resize'); 
     } 
    }); 
}); 
});//]]> 

</script> 


</head> 
<body> 
    <div class="container"> 
    <div class="container" id="infocontainer" style=""><a href="#" class="btn btn-primary" id="thebutton" onclick="return false;">Click here</a></div>   
    <div id="mapcontainer" class="container" style="position: relative"> 
    <div class="container hero-unit" style="padding:0;"> 
       <div class="map-canvas panorama-disabled-map-canvas" id="map_canvas" style="height: 480px;"></div> 
     <div class="map-canvas panorama-disabled-panorama-canvas" id="panorama_canvas" style="height: 480px;"></div> 
    </div>  
    </div> 
    <div id="bottomcontainer" style="">   

    </div>  
    <div id="log"></div>  
</div> 

</body> 


</html>

來源

2013-02-27 doze

我把它解決了代碼。

當我第一次創建初始位置時，它開始工作。

見小提琴固定碼：

http://jsfiddle.net/wK5Hq/23/

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Google maps streeview issue - jsFiddle demo</title> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 


    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 



     <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> 




     <script type='text/javascript' src="http://maps.google.com/maps/api/js?v=3.11&sensor=false&foo=.js"></script> 


    <style type='text/css'> 
    @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

.map-canvas img { 
    border: none !important; 
    max-width: none !important; 
} 

.panorama-activated-map-canvas { 
    width: 50%; 
    float:left; 
    -webkit-border-top-left-radius: 6px; 
    -moz-border-top-left-radius: 6px; 
    border-top-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -moz-border-bottom-left-radius: 6px; 
    border-bottom-left-radius: 6px; 
} 

.panorama-activated-panorama-canvas { 
    width: 50%; 
    float:left; 
    -webkit-border-top-right-radius: 6px; 
    -moz-border-top-right-radius: 6px; 
    border-top-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -moz-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px; 
} 

.panorama-disabled-map-canvas { 
    width: 100%; 
    border-radius: 6px 6px 6px 6px; 
} 

.panorama-disabled-panorama-canvas { 
    display: none; 
} 
    </style> 



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
var data = "{success:true, data:{\"schoolMarker\":{\"lat\":62.759379214514,\"lng\":22.840391666132},\"polylines\":[{\"path\":[{\"lat\":62.768091219265,\"lng\":22.841507465082},{\"lat\":62.767678823231,\"lng\":22.841421634393},{\"lat\":62.767168229676,\"lng\":22.841292888361},{\"lat\":62.766569252889,\"lng\":22.840928107935},{\"lat\":62.765842608979,\"lng\":22.840456039148},{\"lat\":62.76528288457,\"lng\":22.839919597345},{\"lat\":62.764772249527,\"lng\":22.839576274591},{\"lat\":62.764340166815,\"lng\":22.839533359247},{\"lat\":62.764016100627,\"lng\":22.839490443903},{\"lat\":62.763623288351,\"lng\":22.839554816919},{\"lat\":62.762660876165,\"lng\":22.839919597345},{\"lat\":62.761885031233,\"lng\":22.840220004755},{\"lat\":62.761020774875,\"lng\":22.840498954492},{\"lat\":62.760303815724,\"lng\":22.840820819574},{\"lat\":62.759655591079,\"lng\":22.841035396295},{\"lat\":62.759439513032,\"lng\":22.840541869836}]}]}}"; 
var map = null; 
var schoolmarker = null; 
var polyBounds = null; 
var panorama = null; 
var streetViewService = null; 
var g = google.maps; 
var response = eval("(" + data + ")"); 
if (response.success) { 
    initMap('#map_canvas', '#panorama_canvas', response.data); 
} 
function initMap(mapSelector, panoramaSelector, data) { 
    var mapOptions = { 
     scrollwheel: false, 
     zoom: 5, 
     minZoom: 5, 
     streetViewControl: false, 
     mapTypeControl: false, 
     mapTypeControlOptions: { 
     mapTypeIds: [g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE] 
     }, 
     center: new g.LatLng(65.567, 25.303), 
     mapTypeId: g.MapTypeId.ROADMAP, 
     draggableCursor: 'auto', 
     draggingCursor: 'move', 
     disableDoubleClickZoom: true, 
     scaleControl: true 
    }; 
    map = new g.Map($(mapSelector).get(0), mapOptions); 
    mapSelector = null; 
    mapOptions = null; 

    schoolmarker = new google.maps.Marker({ 
     animation: g.Animation.DROP, 
     draggable: true, 
     icon: 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/dancinghall.png', 
     map: map, 
     position: new g.LatLng(data.schoolMarker.lat, data.schoolMarker.lng) 
    }); 

    polyBounds = new g.LatLngBounds(); 
    $.each(data.polylines, function(index, polyline) { 
     var path = []; 
     $.each(polyline.path, function(index, position) { 
      var point = new g.LatLng(position.lat, position.lng); 
      polyBounds.extend(point); 
      path.push(point); 
     }); 
     var polyLineObj = new g.Polyline({ 
      strokeColor: "#00BA03", 
      strokeOpacity: 0.8, 
      strokeWeight: 4, 
      path: path, 
      clickable: false 
     }); 
     polyLineObj.setMap(map); 
    }); 
    map.fitBounds(polyBounds); 
    map.setCenter(schoolmarker.getPosition()); 

    streetViewService = new g.StreetViewService(); 
    streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) { 
     if (status == google.maps.StreetViewStatus.OK) { 
      var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition()); 

      var panoOptions = { 
       position: panoramaData.location.latLng, 
       addressControl: false, 
       linksControl: false, 
       panControl: false, 
       zoomControlOptions: { 
       style: g.ZoomControlStyle.SMALL 
      }, 
      pov: { 
       heading: heading, 
       pitch: 10, 
       zoom: 2 
      }, 
      enableCloseButton: false, 
      visible:false 
      }; 
      panorama = new google.maps.StreetViewPanorama($(panoramaSelector).get(0), panoOptions); 
     } 
    }); 
    map.setStreetView(panorama); 
    } 

$('#thebutton').click(function() { 
    $('#map_canvas').removeClass('panorama-disabled-map-canvas').addClass('panorama-activated-map-canvas'); 
    $('#panorama_canvas').removeClass('panorama-disabled-panorama-canvas').addClass('panorama-activated-panorama-canvas'); 
    g.event.trigger(map, 'resize'); 
    map.fitBounds(polyBounds); 
    map.setCenter(schoolmarker.getPosition()); 
    streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) { 
     if (status == google.maps.StreetViewStatus.OK) { 
      var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition()); 

      var panoOptions = { 
       position: panoramaData.location.latLng, 
       addressControl: false, 
       linksControl: false, 
       panControl: false, 
       zoomControlOptions: { 
       style: g.ZoomControlStyle.SMALL 
      }, 
      pov: { 
       heading: heading, 
       pitch: 10, 
       zoom: 2 
      }, 
      enableCloseButton: false, 
      visible:true 
      }; 
      panorama.setOptions(panoOptions); 
      g.event.trigger(panorama, 'resize'); 
     } 
    }); 
}); 
});//]]> 

</script> 


</head> 
<body> 
    <div class="container"> 
    <div class="container" id="infocontainer" style=""><a href="#" class="btn btn-primary" id="thebutton" onclick="return false;">Click here</a></div> 
    <div id="mapcontainer" class="container" style="position: relative"> 
    <div class="container hero-unit" style="padding:0;"> 
       <div class="map-canvas panorama-disabled-map-canvas" id="map_canvas" style="height: 480px;"></div> 
     <div class="map-canvas panorama-disabled-panorama-canvas" id="panorama_canvas" style="height: 480px;"></div> 
    </div> 
    </div> 
    <div id="bottomcontainer" style=""> 

    </div> 
    <div id="log"></div> 
</div> 

</body> 


</html>

來源

2013-02-27 15:57:17 doze

我有同樣的問題。

有時候，StreetView有效，而在其他時候只顯示灰色。

它取決於位置。

讓我澄清的解決方案......

我不可靠的代碼是這樣的：

function showStreetView(lat, lng) 
{ 
    var pos = new google.maps.LatLng(lat, lng); 

    var panoramaOptions = 
    { 
     position: pos, 
     pov: { 
      heading: 0, 
      pitch: 0 
     } 
    }; 

    var streetViewService = new google.maps.StreetViewService(); 

    var STREETVIEW_MAX_DISTANCE = 100; 

    streetViewService.getPanoramaByLocation(pos, STREETVIEW_MAX_DISTANCE, function(streetViewPanoramaData, status) 
    { 
     if (status === google.maps.StreetViewStatus.OK) 
     { 
      var panorama = new google.maps.StreetViewPanorama(document.getElementById('streetView'), panoramaOptions); 

      map.setStreetView(panorama); 
     } 
     else 
     { 
      // no street view available in this range, or some error occurred 
      map.getStreetView().setVisible(false); 
     } 
    }); 
}

......也就是「panoramaOptions」是附近的開始和包含的位置，我計算。

我改變了這個，在調用streetViewService.getPanoramaByLocation（）之後放置'panoramaOptions'，並將其中的位置設置爲'streetViewPanoramaData.location.latLng'中返回的值，即全景的實際位置，而不是我的計算的位置。然後它工作。

更新的代碼看起來是這樣的：

function showStreetView(lat, lng) 
{ 
    var pos = new google.maps.LatLng(lat, lng); 

/* var panoramaOptions = 
    { 
     position: pos, 
     pov: { 
      heading: 0, 
      pitch: 0 
     } 
    }; 
*/ 
    var streetViewService = new google.maps.StreetViewService(); 

    var STREETVIEW_MAX_DISTANCE = 100; 

    streetViewService.getPanoramaByLocation(pos, STREETVIEW_MAX_DISTANCE, function(streetViewPanoramaData, status) 
    { 
     if (status === google.maps.StreetViewStatus.OK) 
     { 
      var panoramaOptions = 
      { 
       position: streetViewPanoramaData.location.latLng, // here is the important change !!!! 
       pov: { 
        heading: 0, 
        pitch: 0 
       } 
      }; 

      var panorama = new google.maps.StreetViewPanorama(document.getElementById('streetView'), panoramaOptions); 

      map.setStreetView(panorama); 
     } 
     else 
     { 
      // no street view available in this range, or some error occurred 
      map.getStreetView().setVisible(false); 
     } 
    }); 
}

於是有人施展「灰色」，因爲我試圖迫使它顯示在該位置的全景我算過，而在使用的實際位置函數在getPanoramaByLocation（...）的第三個參數中返回的全景圖...）

來源

2014-09-17 15:33:33 paulo62

是的，當然，您需要首先找到最近的全景位置，而不是將其設置爲任意緯度位置，但如果您查看代碼，這不是我的情況中的問題。在街道地圖設置可見之前，使用getPanoramaByLocation獲取正確的全景位置。但問題在於，當街道地圖第一次被創建爲隱藏組件時，位置未被設置。 – doze 2014-09-19 04:30:06

谷歌地圖街景瓷磚不加載在Firefox最初，只有拖動後

回答

相關問題