Question

Google地图未在隐藏标签上加载，仅在第一个标签上加载，或者在加载代码显示之前按下标签。

TABS
<script>
$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})

</script>

https://jsfiddle.net/gc8putcs/

Answer 1

问题不在于添加或删除current类，而在于您正在初始化的地图对象的数量 - 您在小提琴上显示为代码。

您需要初始化地图对象的多个实例：

function initialize(){

  var mapProp = {
    center:myCenter,
    zoom:17,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map = [];
  var mapElements = document.getElementsByClassName('googleMap');
  for(var i = 0; i < mapElements.length; i++){
      map[i] = new google.maps.Map(mapElements[i], mapProp);
  }

  for(var x = 0; x < map.length; x++){
    var marker=new google.maps.Marker({
      position:myCenter,
    });

    var marker=new google.maps.Marker({
      position:myCenter,
      animation:google.maps.Animation.BOUNCE
    });
    marker.setMap(map[x]);
    var infowindow = new google.maps.InfoWindow({
      content:"name"
    });
    infowindow.open(map[x],marker);
  }

}

还有一个已知的issue Google地图，您无法将display: none应用于容器元素。您需要将该元素的CSS更改为：

.tab-content:not(.current){
    position: absolute;
    left: -200%;
    padding: 2px;
}

.tab-content.current{
    display: block;     
}

Updated fiddle

谷歌地图jquery标签没有加载

1 个答案: