IE7中的参数错误无效 - jQuery选项卡和Google Map

时间:2011-11-17 22:41:43

标签: jquery

我试图在IE7中多次纠正这个'无效参数'错误,但它仍然弹出...... 看来我没有弄到这个错误的实际原因。虽然它在Firefox中运行良好。

这是我的代码,我已将其移至html文件以进行测试。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery Tabs and Google Map</title>   
    <style>
        #pp_wrapper ul.tabs li.active a {
            color:#fff
        }
        #pp_wrapper ul.tabs li a:hover 
        {
            color:#fff
        }     
        a, a:link, a:visited
        {
            color:#ff3333
        }
        ul.tabs li a:hover { 
            background:#ff3333;
            color:#fff
            }   
        ul.tabs li.active a
        {
            background:#ff3333;
        }  
        #pp_wrapper .tab_container {
            overflow: hidden;
            float: left; 
            width: 580px;
            border-width: 0px;
        }
        #pp_wrapper ul.tabs {
            height: 44px; 
            width: 940px;
            border-width: 0px 0px 1px 0px;
            border-style: solid;
            float: left;
        }
        #pp_wrapper ul.tabs li {
            float: left;
            margin: 0 2px;
            padding: 0;
            height:auto;
            line-height:1.2;
            width:94px;
            height:50px;
            position:relative;
        }
        #pp_wrapper ul.tabs li a {
            text-decoration: none;
            width:94px;
            padding: 6px 2px;
            height:auto;
            position:absolute;
            text-align:center;

            bottom:10px;
        }

        #pp_wrapper ul.tabs li a span 
        {
            font-size:1.1em;
        } 
    </style>       

     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
     <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script> 
</head>

<body>
    <div id="pp_wrapper">
        <div id="content">

            <div id="tabs">
                <ul class="tabs">
                    <li><a href="#tabs-22581"><span>Description</span></a></li>
                    <li><a href="#tabs-22582"><span>Map</span></a></li>
                 </ul>

                <div class="tab_container">

                    <div class="tab_content" id="tabs-22581">
                        <p>
                        </p>
                        <p>
                            Golf has been played on the Links at St Andrews since around 1400 AD and the Old
                            Course is renowned throughout the world as the Home of Golf.<br />
                            <br />
                            The game grew in popularity and by the 19th century it was part of the way of life
                            for many local people, whether as players, caddies, ball makers or club makers.
                            Golf still plays a major part in the culture and economy of St Andrews today. As
                            the 600 year history of the Links has unfolded, one simple track hacked through
                            the bushes and heather has developed into six public golf courses, attracting hundreds
                            of thousands of golfing pilgrims from around the globe.<br />
                            <br />
                            St Andrews Links is the largest golfing complex in Europe and all 18 hole courses
                            can be booked in advance. The Castle Course, the seventh co</p>
                       <p>
                            Price: £15,050,000.00</p> 
                    </div>
                    <div class="tab_content" id="tabs-22582">
                        <p>
                        </p>
                        <p>
                            <div id="GoogleMap_Canvas" style="width: 410px; height: 450px;">
                            </div>
                        </p>
                    </div>

                </div>
            </div>
         </div>
    </div>

    <script type="text/javascript">

                var mapLat = '51.509663';
                var mapLong = '-0.599329';
                var mapContainer = 'GoogleMap_Canvas';
                var mapTitle = 'Map Tester';

                $(document).ready(function() {

                    //When page loads...
                    $(".tab_content").hide(); //Hide all content
                    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
                    $(".tab_content:first").show(); //Show first tab content

                    //If first tab is having GoogleMap_Canvas, InitialiseGoogleMap()
                    if ($(".tab_content:eq(0)").has('#' + mapContainer).length > 0) {
                        InitialiseGoogleMap();
                    }

                    //On tab Click Event
                    $("ul.tabs li").click(function() {
                        $("ul.tabs li").removeClass("active"); //Remove any "active" class
                        $(this).addClass("active"); //Add "active" class to selected tab
                        $(".tab_content").hide(); //Hide all tab content
                        $(".tab_content").removeClass("activeContent");

                        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active div(tab_content) 'id' 
                        $(activeTab).addClass("activeContent");
                        $(activeTab).fadeIn(); //Fade in the active ID content
                        //This is needed for showing google maps inside the tabs instead of the window load event. Will avoid the issues with tabs and googlemaps.
                        if ($(activeTab).find('#' + mapContainer).length > 0) {
                            InitialiseGoogleMap();
                        }

                        return false;
                    });

                });

                function InitialiseGoogleMap() {

                    var googleCanvas = document.getElementById(mapContainer);
                    if (googleCanvas != null) {
                        var point = new window.google.maps.LatLng(mapLat, mapLong);
                        var myOptions =
                    {
                        zoom: 16,
                        center: point,
                        mapTypeControl: true,
                        mapTypeControlOptions: {
                            style: window.google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                        },
                        navigationControl: true,
                        scaleControl: true,
                        mapTypeId: window.google.maps.MapTypeId.ROADMAP
                    };
                        map = new window.google.maps.Map(document.getElementById(mapContainer), myOptions);
                        var marker = new window.google.maps.Marker(
            {
                position: point,
                map: map,
                title: mapTitle
            });
                        marker.setMap(map);
                    }
                };
    </script>
</body>
</html>

P.S。请在IE7中运行以上文件(启用javascript调试)。 当我来回切换标签时,我得到javascript'无效参数'错误。

任何人都可以指导我可能的原因和修复此错误。

谢谢!

1 个答案:

答案 0 :(得分:2)

似乎IEs&lt; 9在发布地图渲染时遇到麻烦,而之前的地图还没有完成它的工作。

那就是说,你可能需要一种方法来知道当前地图完成它的渲染,一些回调等等。

如另一个帖子所述(http://stackoverflow.com/questions/3461246/google-maps-api-v3-is-there-a-callback-or-event-listener-for-a-setmap-event ),所以就在你的marker.setMap(map)下;你可以设置一个回调,如:

 marker.setMap(map);
 mapIdle = false;
 google.maps.event.addListener(map, 'idle', function() {
      mapIdle = true;
 });

,当然你必须全局定义var mapIdle,例如就在mapTitle定义下:

 var mapTitle = 'Map Tester';
 var mapIdle = true;

,最后你应该阻止(或者如果需要重新绘制地图,至少推迟它)InitialiseGoogleMap();切换标签时如果之前的地图作业尚未完成(如果mapIdle仍然等于false):

 if ($(activeTab).find('#' + mapContainer).length > 0 && mapIdle) {

而不仅仅是

 if ($(activeTab).find('#' + mapContainer).length > 0) {