我的谷歌地图网站在 Firefox 和 Chrome 中运行良好，但是复选框功能在 IE 中不起作用。有人可以告诉我为什么，我需要尽快部署这个并且遇到 IE 问题。我的客户使用 IE 8。感谢您的帮助。
<!DOCTYPE html> <!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" type="text/css" href="included.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<Title>Web Map Tool</Title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
alert("Something went wrong - talk to your developer!!!");
event.preventDefault();
});
});
</script>
<div data-role="page">
<div data-role="header">
<h1>Google map Web Viewer Tool</h1>
</div><!-- /header -->
<br>
</div>
<br>
<br>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=<yourkey>&sensor=false">
</script>
<br>
<script>
var map; //this is the reference to your map
var markersArray = []; //this is an array holding the markers plotted on the map
var infoWindow; //this is the reference to a reuseable InfoWindow
// harcoded places
// on the form [name, lat, lng, category, content]
var places = [
['Group1', 47.364237, -92.690690, 3, '<h2>Group (-11)</h2>'],
['Group2', 43.711833, -95.719528, 1, '<h2>Group (4)</h2>'],
['Group3', 44.947385, -92.854821, 2, '<h2>Group (12)</h2>'],
['Group4', 45.899306, -91.521083, 4, '<h2>Group (-4)</h2>'],
['Group5', 45.223620, -91.127480, 1, '<h2>Group (3)</h2>'],
['Group6', 46.448371, -90.166895, 2, '<h2>Group (7)</h2>'],
['Group7', 40.471315, -107.580322, 2, '<h2>Group (1)</h2>'],
['Group8', 38.208628, -104.574672, 1, '<h2>Group (5)</h2>'],
['Group9', 39.623084, -104.452554, 2, '<h2>Group (10)</h2>'],
['Group10', 33.186694, -101.407897, 3, '<h2>Group (-6)</h2>'],
['Group11', 32.210741, -103.262702, 1, '<h2>Group (6)</h2>'],
['Group12', 33.991050, -103.858130, 2, '<h2>Group (11)</h2>'],
];
//just for fun, different icons for each category
//I thought you may wanted to show different icons
//here just some of the "official" google marker icons
var icons = [
'http://maps.google.com/mapfiles/kml/paddle/red-circle.png', //Red
'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png', //Yellow
'http://maps.google.com/mapfiles/kml/paddle/grn-circle.png', //Green
'http://maps.google.com/mapfiles/kml/paddle/blu-circle.png', //Blue
];
// center map in middle of Nebraska
var mapCenter = new google.maps.LatLng(40.658014, -99.439275);
//create the map
function createMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: mapCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoomControl: true,
streetViewControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
});
//create a global infowindow to show content
//set a maxwidth of 300 pixel
infoWindow = new google.maps.InfoWindow({
maxWidth: 300,
map: map
});
}
function initMarkers() {
for (var i=0; i<places.length; i++) {
var place=places[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place[1], place[2],place[3]),
map: map,
//set icon, category as icons index
//outcomment this line if you just want to show the defuult icon
icon : icons[place[3]],
//add data from places to the marker
title : place[0],
category: place[3],
content: place[4]
});
//add the marker to the markersArray, used to hide/show markers
markersArray.push(marker);
//create a click event that shows the infowindow when a marker is clicked
//the infowindow get latlng and content from the marker
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setPosition(this.position);
infoWindow.setContent(this.content);
infoWindow.open(map);
});
}
}
//show / hide markers based on category
//if category is 0, show all markers
function showMarkersByCategory(category) {
for (var i=0; i<markersArray.length; i++) {
if ((category==0) || (markersArray[i].category==category)) {
markersArray[i].setVisible(true);
}
}
}
function initialize() {
createMap();
initMarkers();
//init the select box where you show/hide the markers per category
var checkbox=document.getElementById('checkbox');
checkbox.onclick = function() {
for (var i=0; i<markersArray.length; i++) {
markersArray[i].setVisible(false);
}
var checkedBoxes = $('#checkbox > input:checkbox:checked');
for (var i = 0; i < checkedBoxes.length; i++){
var category = checkedBoxes[i].value;
showMarkersByCategory(category);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:100%;height:800px;float:left;clear:none;"></div>
<div style="position: absolute; left: 5px; top: 20px; padding: 10px 10px 10px 10px;">
<br>
<form id="checkbox">
<input type="checkbox" name="group1" value="1"><b>Group 1</b> 
<input type="checkbox" name="group2" value="2"><b>Group 2</b> 
<input type="checkbox" name="group3" value="3"><b>Group 3</b> 
<input type="checkbox" name="group4" value="4"><b>Group 4</b>  
</form>
</div>
</body>
</html>