Javascript 谷歌网络地图复选框在Firefox&；Chrome，但在IE中不起作用
我的谷歌地图网站在Firefox和Chrome中运行良好，但是复选框功能在IE中不起作用。有人能告诉我为什么，我需要尽快部署此网站，并且IE出现问题。我的客户使用IE 8。谢谢你的帮助Javascript 谷歌网络地图复选框在Firefox&；Chrome，但在IE中不起作用,javascript,html,internet-explorer,google-maps,firefox,Javascript,Html,Internet Explorer,Google Maps,Firefox,我的谷歌地图网站在Firefox和Chrome中运行良好，但是复选框功能在IE中不起作用。有人能告诉我为什么，我需要尽快部署此网站，并且IE出现问题。我的客户使用IE 8。谢谢你的帮助 <!DOCTYPE html> <!-- saved from url=(0014)about:internet --> <html> <head> <meta name="viewport" content="width=dev
<!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>
网络地图工具
$（文档）.ready（函数（）{
$（“a”）。单击（函数（事件）{
警告（“出了问题-与开发人员交谈！！！”；
event.preventDefault（）；
});
});
谷歌地图浏览器工具
var映射//这是对你的地图的参考
var-markersArray=[]//这是一个包含地图上绘制的标记的数组
var信息窗口//这是对可重用信息窗口的引用
//加密位置
//表格[名称、lat、lng、类别、内容]
变量位置=[
['Group1'，47.364237，-92.690,3，'group11'，
['Group2'，43.711833，-95.719528，1，'group4'，
['Group3'，44.947385，-92.854821,2'，'group12'，
['Group4'，45.899306，-91.521083,4，'Group4'，
['Group5'，45.223620，-91.127480,1，'group3'，
['Group6'，46.448371，-90.166895,2'，'group7'，
['Group7'，40.471315，-107.580322,2，'group1'，
['Group8'，38.208628，-104.574672，1，'group5'，
['Group9'，39.623084，-104.452554，2，'group10'，
['Group10'，33.186694，-101.407897,3，'group6'，
['Group11'，32.210741，-103.262702,1，'group6'，
['Group12'，33.991050，-103.858130,2，'group11'，
];
//只是为了好玩，每个类别都有不同的图标
//我想你可能想展示不同的图标
//这里只是一些“官方”谷歌标记图标
变量图标=[
'http://maps.google.com/mapfiles/kml/paddle/red-circle.png“，//红色
'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png“，//黄色
'http://maps.google.com/mapfiles/kml/paddle/grn-circle.png“，//绿色
'http://maps.google.com/mapfiles/kml/paddle/blu-circle.png“，//蓝色
];
//内布拉斯加州中部的中心地图
var mapCenter=new google.maps.LatLng（40.658014，-99.439275）；
//创建地图
函数createMap（）{
map=new google.maps.map（document.getElementById（“map”）{
中心：地图中心，
缩放：5，
mapTypeId:google.maps.mapTypeId.HYBRID，
动物控制：对，
街景控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE
}
});
//创建一个全局信息窗口以显示内容
//将maxwidth设置为300像素
infoWindow=新建google.maps.infoWindow({
最大宽度：300，
地图：地图
});
}
函数initMarkers（）{
对于（var i=0；i您的代码中有“挂起”逗号（数组最后一个条目后的逗号）。这会导致旧版本IE出现问题（它们会向数组中添加额外的null条目）。请删除它们
i、 e.改变：
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>'], // <<-- remove comma here
];
var places=[
['Group1'，47.364237，-92.690,3，'group11'，
['Group2'，43.711833，-95.719528，1，'group4'，
['Group3'，44.947385，-92.854821,2'，'group12'，
['Group4'，45.899306，-91.521083,4，'Group4'，
['Group5'，45.223620，-91.127480,1，'group3'，
['Group6'，46.448371，-90.166895,2'，'group7'，
['Group7'，40.471315，-107.580322,2，'group1'，
['Group8'，38.208628，-104.574672，1，'group5'，
['Group9'，39.623084，-104.452554，2，'group10'，
['Group10'，33.186694，-101.407897,3，'group6'，
['Group11'，32.210741，-103.262702,1，'group6'，
['Group12'，33.991050，-103.858130，2，'Group（11）”，//是的，但是我不是专家，我从来没有使用IE。这是我发现的：网页错误详细信息用户代理：Mozilla/4.0（兼容；MSIE 8.0；Windows NT 5.1；Trident/4.0；.NET CLR 1.1.4322；.NET CLR 2.0.50727；InfoPath.1；.NET CLR 3.0.04506.30；.NET CLR 3.0.4506.2152；.NET CLR 3.5.30729）时间戳：Tue，2013年9月24日16:43:03 UTC消息：“1”为空或不是对象行：146 Char:4Wow太棒了，谢谢你的帮助..我已经粘贴了越来越多的标记，所以我一定错过了。我会看看会发生什么。再次感谢可能还有其他标记，修复所有标记（图标数组有相同的问题）。这在Chrome或Firefox中并不重要，但会破坏IE的旧版本（我认为它在最新版本中得到了解决），再次感谢您的建议。
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>'] // <<-- remove comma here
];