Question

我想我的问题与此问题几乎相同：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：请记住我在滑块标签上遇到了同样的问题！我想要一个解决方案来解决这两个问题。

Answer 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

Google Map或FlexSlider在处于非活动div

1 个答案: