javascript - 在 Bootstrap 选项卡中加载谷歌地图，修复显示空白

Question

更新我已经尝试实现wf的解决方案，但错误仍然存​​在。你可以在这里看一个活生生的例子 --> http://www.opohills.com/taipei-rentals/apollo_a.php

向下滚动并单击“位置”选项卡

我正在尝试在 Bootstrap 选项卡中加载谷歌地图。我遇到了这里讨论的同样问题，并在 SA 广泛讨论——

https://github.com/twitter/bootstrap/issues/2330

---

解决方法是在单击选项卡时添加回调，以加载 map 。我正在尝试实现这一点，但没有成功。错误仍然存​​在(当只有 1/8 的 map 显示在左上角时。)当我打开检查元素时， map 填满并且工作正常(我猜是因为检查元素正在重新读取 javascript)

下面是我的 javascript，因为这是我第一次真正尝试它，所以我确定我做错了什么 --

  <script type="text/javascript">

    var map,
        marker = new google.maps.Marker({
                   position: new google.maps.LatLng(25.041483, 121.553984),
                   draggable: true,
                   title: 'Opo Apartment' }),
        infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});

        $('#location').on('show', function(e) {
          if( map == undefined) {  

            map =    new google.maps.Map(
                     document.getElementById('map-canvas'), 
                      { zoom: 14,
                        center: new google.maps.LatLng(25.041483, 121.553984),
                        mapTypeId: google.maps.MapTypeId.ROADMAP })
          }
          marker.setMap(map);
          infoWindow.open(map, marker);
        })

  </script>​

你对此有何看法？

Answer 1

我对其进行了修复，但将其保存在不同的 div 中，远离选项卡，并在单击某个选项卡时显示它。可以去同一个站点看代码

$(document).ready(function(){

  var map,
      marker = new google.maps.Marker({
                 position: new google.maps.LatLng(25.041483, 121.553984),
                 draggable: true,
                 title: 'Opo Apartment' }),
      infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});



  $('#location').on('show', function(e) {
    if( map == undefined) {  

      map =    new google.maps.Map(
               document.getElementById('map-canvas'), 
                { zoom: 14,
                  center: new google.maps.LatLng(25.041483, 121.553984),
                  mapTypeId: google.maps.MapTypeId.ROADMAP })
    }
    document.getElementById("largemap").style.display="block";

    google.maps.event.trigger(map, 'resize');
            marker.setMap(map);
    infoWindow.open(map, marker);
  })
  $('.tabclick').on('show', function(e) {
    document.getElementById("largemap").style.display="none";

  })

})