javascript - 谷歌地图街景图 block 最初不会在 Firefox 中加载，仅在拖动后才加载

标签 javascript google-maps google-maps-api-3 twitter-bootstrap google-street-view

我在使用谷歌地图街景时遇到问题(在 Bootstrap 主题中，如果与此有关)。

我通过单击按钮将街景设置为可见，它在 IE 和 Chrome 中工作正常，但在 Firefox 中，街景保持灰色(即，它不会加载初始图 block )，直到您使用鼠标。

我创建了一个关于它的 fiddle ，你自己尝试一下，你会感到惊讶:

http://jsfiddle.net/wK5Hq/22/

有人猜出为什么会发生这种情况吗？

编辑:现在，当我在 fiddle 中尝试时，火狐根本无法加载图 block ，而在 Chrome 上则加载良好。在我的真实环境中，第一次拖动 View 后，图 block 也会加载到 Firefox 中。

编辑2:图 block 在 fiddle 中根本没有显示，因为我忘记添加样式来修复 Bootstrap 与谷歌地图 Canvas 的困惑。我在 css 中添加了“.map-canvas img”规则，现在它显示了最初的问题。在 Firefox 中拖动街景之前，图 block 不会加载。更新了上面的 fiddle 链接。

这是 fiddle 的代码

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

最佳答案

我已经解决了。

当我第一次创建街景时向街景添加初始位置时，它开始工作。

查看 fiddle 中的固定代码:

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>

关于javascript - 谷歌地图街景图 block 最初不会在 Firefox 中加载，仅在拖动后才加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15102808/

上一篇：javascript - 如果使用backbone.js 或ember.js，如何隐藏应用程序逻辑？

下一篇：javascript - jQuery 事件命名空间是如何工作的

相关文章：

javascript - 为什么访问父 iframe 时 Microsoft Edge 中出现 "permission denied"

javascript - RxJS 5.0 "do while"类机制

javascript - 如何在不写入数据的情况下返回 Vue 资源？

ios - 显示 Google map 的 UIWebView 切断了缩放控件

reactjs - 获取谷歌地图时遇到问题

javascript - 地理编码在第二次调用时返回 (NaN, Nan)

javascript - 自从添加验证后，没有任何效果

javascript - 当谷歌地图进入街景 View 时，我可以锁定什么事件？

javascript - Google Javascript API Photo getURL 返回临时 URL 并且无法找到 photo_reference

google-maps - 如果达到免费API上限，我可以停止向Google收费吗？

©2024 IT工具网  联系我们