IE7中的无效参数错误-jQuery选项卡和Google Map [英] Invalid Argument error in IE7 - jQuery tabs and Google Map
问题描述
我已经尝试纠正IE7中的无效参数"错误很多次了，但是仍然弹出... 看来我不明白这个错误的实际原因.尽管它可以在Firefox中正常运行.
I have tried to rectify this 'Invalid Argument' error in IE7 so many times, but still it pops up... it seems I am not getting to the actual reason of this error. Though it runs fine in Firefox.
这是我的代码，出于测试目的，我已将其移到html文件中.
Here is my code which I have moved to a html file for testing purpose.
<!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'Invalid arguments'错误.
P.S. Please run above file in IE7 (with javascript debugging enabled). When I switch between tabs back and forth, I get javascript 'Invalid argument' error.
任何人都可以指导我解决此错误的可能原因和解决方法.
Can anyone please guide me the possible reason and fix of this error.
谢谢！
推荐答案
似乎在发布地图渲染而先前的地图尚未完成工作时，IE 9遇到了麻烦.
It seems that IEs<9 are running into trouble when map rendering is issued while previous map didn't finished it's work yet.
也就是说，您可能需要一种方法来知道当前地图的渲染，回调或其他操作.
That said, you'll probably need a way to know when current map has finished it's rendering, some callback or something.
如另一线程中所述(http://stackoverflow.com/questions/3461246/google-maps-api-v3-is-there-a-callback-or-event-listener-for-a-setmap-event )，因此就在您的marker.setMap(map);下您可以设置如下回调:
As described in another thread (http://stackoverflow.com/questions/3461246/google-maps-api-v3-is-there-a-callback-or-event-listener-for-a-setmap-event), so just under your marker.setMap(map); you can set up a callback like:
marker.setMap(map);
mapIdle = false;
google.maps.event.addListener(map, 'idle', function() {
mapIdle = true;
});
，当然，您必须全局定义var mapIdle，例如在mapTitle定义下:
, of course you'll have to have var mapIdle defined globally, e.g. just under the mapTitle definition:
var mapTitle = 'Map Tester';
var mapIdle = true;
，最后您应该防止(或在需要重绘地图时至少推迟)InitialiseGoogleMap();如果以前的地图作业尚未完成(如果mapIdle仍等于false)，则在切换标签时:
, and finally you should prevent (or at least to postpone it if there is a need to redraw the map) InitialiseGoogleMap(); when switching tabs if previous map job hasn't finished yet (if mapIdle still equals to false):
if ($(activeTab).find('#' + mapContainer).length > 0 && mapIdle) {
而不是仅仅
if ($(activeTab).find('#' + mapContainer).length > 0) {
这篇关于IE7中的无效参数错误-jQuery选项卡和Google Map的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
