Question

我使用Bootstrap Accordian在两个面板中使用Google Map和Street View javascript代码。第一个面板包含地图，第二个面板包含街景。目前，两个面板都在页面加载时加载其JS代码，但第二个面板已折叠，因此只有“地图”面板可见。

是否可以延迟加载包含街景视图代码的第二个面板，直到用户点击展开/取消隐藏内容而不是在页面加载时加载所有内容？

由于

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
href="#collapse1">Local Map</a></h4></div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
**Google Map JS**
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" 
href="#collapse2">Street View</a></h4></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="pano" style="width: 400px; height: 300px;"></div>
</div>
</div>
</div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion-toggle").on('click',function(){
if($(this).attr('href') =="#collapse2"){
alert('');function initialize() {
var point= new google.maps.LatLng(51.524964,-0.34146399999997357);
var panoramaOptions = {
position: point,
pov: {
heading: 12.399999999999999,
pitch: 6.94
}
};
var panorama = new     
google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
}
});
});
}
});
});
</script>

Answer 1

你可以尝试这样的事情：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Accordion</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
<script>
$(document).ready(function(){
$(".accordion-toggle").on('click',function(){
if($(this).attr('href') =="#collapse2"){
    alert('hi');
    initialize();
}
});
});


function initialize() {
      var fenway = new google.maps.LatLng(42.345573, -71.098326);
      var mapOptions = {
        center: fenway,
        zoom: 14
      };
      var map = new google.maps.Map(
          document.getElementById('map-canvas'), mapOptions);
      var panoramaOptions = {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      };
      var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
      map.setStreetView(panorama);
    }

</script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
href="#collapse1">Local Map</a></h4></div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
**Google Map JS**
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" 
href="#collapse2">Street View</a></h4></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
 <div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="width: 400px; height: 300px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

在点击而不是页面加载时加载Accordion Panel

1 个答案: