在非活动div中，Google Map或FlexSlider会部分显示_JavaScript

我想我有一个与此问题几乎相同的问题：但不幸的是，似乎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
});
});

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

注意1：对于大多数相同的问题，我尝试了其他一些答案，但没有为我工作或部分工作。

注意2：请记住，我对滑块选项卡有同样的问题！ 我想要一个解决这两个问题的解决方案。

我自己解决了！

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);
        });
    });
});
}

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

在非活动div中，Google Map或FlexSlider会部分显示

问题描述

1楼