2

我正在使用 2 个选项卡，第一个用于显示列表，另一个用于显示地图。当第一次加载页面时，默认显示 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");

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

有人可以帮我吗？

4

1 回答 1

2

我已经弄清楚了我遇到的问题。

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

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

我的问题的解决方案是：

如果您将地图用于隐藏的 div。将地图变量声明为全局变量。

然后首先显示 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');
        });
于 2013-07-06T13:42:42.187 回答