谷歌地图加载部分点击隐藏标签

Google Map loading partially on click on the hidden tab

本文关键字：隐藏标签加载部谷歌地图更新时间：2023-09-26

我使用了两个选项卡，第一个用于显示列表，另一个用于显示地图。当第一次加载页面时，默认情况下会显示1个选项卡，单击第二个选项卡时会显示地图，但当我单击列表选项卡并再次单击地图选项卡时，会部分加载地图。

这是我的JAVASCRIPT代码：

$(document).on('click', "#load-map-view", function() {
        locateStores();
        $("#store-list-view").hide();
        $("#store-list-view").removeClass('disabled');
        $("#store-map-view").show();
        $("#store-map-view").addClass('disabled');
    });
function locateStores() {
    var mapContent;
    var map = new google.maps.Map(document.getElementById("store-map-view"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 13
    });
    var markers = [];
    $("#store-list-view .listed-shop").each(function() {
        markers.push({
            lat: $(this).attr('data-lat'),
            lng: $(this).attr('data-lan'),
            name: $.trim($(this).find('div.shop-name').text())
        });
    });
for (index in markers)
        addMarker(markers[index]);
    function addMarker(data) {

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.lat, data.lng),
            map: map,
            title: data.name
        });
        var infobox = new InfoBox({
            content: document.getElementById("infobox"),
            disableAutoPan: false,
            maxWidth: 150,
            pixelOffset: new google.maps.Size(-140, -10),
            zIndex: null,
            boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.80,
                width: "400px"//"280px"
            },
            closeBoxMargin: "12px 4px 2px 2px",
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            infoBoxClearance: new google.maps.Size(1, 1)
        });
        google.maps.event.trigger(map, 'resize');
        map.setZoom(map.getZoom());
        google.maps.event.addListener(marker, 'click', function() {
            $(".infoBox").fadeOut(300);
            infobox.open(map, this);
            map.panTo(new google.maps.LatLng(47.6145, -122.3418));
        });
    }
    var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
        var data = markers[index];
        bounds.extend(new google.maps.LatLng(data.lat, data.lng));
    }
    map.fitBounds(bounds);
var pin = new google.maps.MVCObject();
    function openInfoWindow(marker) {
        title.innerHTML = marker.getTitle();
        pin.set("position", marker.getPosition());
        infowindow.open(map, marker);
    }
}

我尝试了几种解决方案，如：添加此代码

google.maps.event.trigger(map, "resize");

和许多其他解决方案，但页面仍然没有加载。

有人能帮我吗？

我已经解决了我遇到的问题。

我在错误的位置添加了以下代码：

google.maps.event.trigger(map, "resize");

我的问题的解决方案是：

如果您对隐藏的div使用map，请将map变量声明为global。

然后首先显示div，在显示div后加载映射，并使用给定的代码调整其大小。

    var map; //globalize your map variable
            // Then do the necessary loading
    $(document).on('click', "#load-map-view", function() {
            $("#store-list-view").hide();
            $("#store-list-view").removeClass('disabled');
            locateStores();
            google.maps.event.trigger(map, "resize");
    $("#store-map-view").show();
            $("#store-map-view").addClass('disabled');
        });