Google Map 或 FlexSlider 在非活动 div 中部分显示答案

【问题标题】：either Google Map or FlexSlider displaying partially when in inactive divGoogle Map 或 FlexSlider 在非活动 div 中部分显示
【发布时间】：2015-07-20 00:51:45
【问题描述】：

我想我和这个问题几乎有同样的问题：Google Map displaying just partially 但不幸的是，jsfiddle 示例似乎不再存在。

当页面加载了隐藏选项卡中的地图时，地图只加载了一部分，通常是地图的左上角，但是在选项卡处于活动状态的情况下加载地图时地图渲染得很好。

我再次在另一个选项卡上有一个 FlesSlider，当 FlexSlider 选项卡处于非活动状态时加载页面时也会出现同样的问题。

这是我的 javascript 代码：

function initialize() {
var mapOptions = {
    scaleControl: true,
    center: new google.maps.LatLng(26.535022, 54.027758),
    zoom: 17
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: iconBase + 'schools_maps.png'
});

var infowindow = new google.maps.InfoWindow();
infowindow.setContent('<b>hotel</b>');
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
});
}

google.maps.event.addDomListener(window, 'load', initialize);

$('.map-trigger').click(function() {  google.maps.event.trigger(map,'resize'); 
});


// Tour Tab Image Slider
$(window).load(function() {
// The slider being synced must be initialized first
$('#tour-slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
rtl: true
});
});

请查看我为您制作的这个snippet，以了解实际问题。

注意 1：我尝试了一些其他答案来解决大部分相同的问题，但对我不起作用或部分起作用。

注意 2： 请记住，我在滑块标签上也有同样的问题！我想要一个解决这两个问题的解决方案。

【问题讨论】：

标签： javascript twitter-bootstrap google-maps tabs flexslider

【解决方案1】：

自己解决了！

if ($('#map-canvas').length) {
var map,
    service;

jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(26.531786, 53.971665);
        var myOptions = {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        marker.setMap(map);


        $('a[href="#tour-map"]').on('shown.bs.tab', function(e) {
            google.maps.event.trigger(map, 'resize');
            map.setCenter(latlng);
        });
    });
});
}

在这里您可以看到一个工作示例：Snippet

【讨论】：