1

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

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

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

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

修复方法是在单击选项卡时添加回调，以加载地图。我正在尝试实现这一点，但没有成功。错误仍然存​​在（当左上角仅显示地图的 1/8 时。）当我打开检查元素时，地图填满并且工作正常（我猜是因为检查元素正在重新读取 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>​

您对此有何看法？

4

3 回答 3

5

我对其进行了修复，但将其保存在不同的 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";

  })

})
于 2012-12-22T07:41:39.063 回答
2

你试过这样吗？

$('#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);

  google.maps.event.addListenerOnce(map, "bounds_changed", function() {
    google.maps.event.trigger(map, "resize");
  });
})
于 2012-12-17T08:31:12.493 回答
-1

感谢https://github.com/twbs/bootstrap/issues/2330中的 alexxB

我使用 Cake、Bootstrap 3.0 和 Jquery 1.11。首先检查 jquery 函数是否触发了任何函数以丢弃 javascript 问题，然后添加它。

  $('a[href="#my_id_tab_map"]').on('shown.bs.tab', function(e)
    {
        google.maps.event.trigger(map, 'resize');
    });
于 2014-03-25T22:00:05.640 回答