2011-11-17 39 views
0

我试图纠正这个'无效的参数'错误在IE7很多次,但它仍然弹出... 它似乎我没有得到真正的原因的这个错误。虽然它在Firefox中运行良好。IE7中无效的参数错误 - jQuery标签和谷歌地图

这是我的代码,我已经移动到一个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'无效参数'错误。

任何人都可以请指导我可能的原因和解决这个错误。

谢谢!

回答

2

看来IEs < 9在发布地图渲染时遇到麻烦,而之前的地图尚未完成工作。

这就是说,你可能需要一种方式来知道当前地图已完成它的渲染,一些回调或什么。

正如另一个线程中所述(http://stackoverflow.com/questions/3461246/google-maps-api-v3-is-there-a-callback-or-event-listener-for-a-setmap-事件),所以就在你的marker.setMap(map)下面;您可以设置类似的回调:

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

,当然你必须有变种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) {