Google Web Map 复选框在 Firefox 和 Chrome 中有效,但在 IE 中不起作用
Google Web Map checkboxes work in Firefox & Chrome, but do not function in IE
我的谷歌地图网站在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>
代码中有"挂起"逗号(数组最后一个条目后的逗号)。 这会导致旧版本的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
];
自:
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
];
相关文章:
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 滚动在Chrome中有效,但在Firefox或IE中无效
- 为什么这个按钮在IE中有效,但在Firefox中无效
- Joomla模式框弹出代码在文章中有效,但在代码中无效
- jQuery"焦点”;在一个实例中有效,但在其他实例中无效
- javascript/jQuery:在title中添加换行符——在IE9中有效,但在IE8中无效
- Javascript下载在firefox中停止,但在Chrome中有效
- MagnificPopupLightbox在RubyonRails开发中有效,但在部署到Heroku时无效
- JavaScript函数在Safari中有效,但在Firefox中找不到
- 获取所选选项的Javascript在Webkit/FF中有效,但在IE中无效
- 转换链接在jsfiddle中有效,但在我的浏览器上无效
- ComboBox typeAhead有效,但在某些行为条件下valueField为空
- 为什么这在 jsfiddle 中有效,但在我的文档中不起作用
- MySql数据库INSERT操作在硬盘(localhost)上有效,但在Internet上托管时无效
- 输入元素模式属性的Javascript正则表达式在reFiddle上有效,但在页面上无效
- 在Rails中使用remote:true在Chrome中有效,但在Safari中无效——从js.erb文件调用succe
- slideUp命令被忽略,但在控制台中有效
- 正则表达式在浏览器上有效,但在Node.js中无效
- 禁用字段在IE中有效,但在Firefox中无效
- 在getJSON之后构建HTML在Safari中有效,但在Chrome或Firefox中无效