Javascript 谷歌地图中图层的复选框
我的目标是有四组不同的标记（每组可以有三种不同的颜色）。我需要能够根据地图顶部的复选框打开/关闭：组1、2、3、4以及按颜色过滤这些组的方法（例如：组1、组2、组3、组4和红色、黄色、绿色）。我最初将此设置为下拉列表；现在，我在获取任何复选框以响应这些单击事件时遇到问题。我不是一个经验丰富的开发人员，所以我提前道歉，如果我没有正确解释这一点，任何建议都是感激的。代码如下：Javascript 谷歌地图中图层的复选框,javascript,html,google-maps,checkbox,gis,Javascript,Html,Google Maps,Checkbox,Gis,我的目标是有四组不同的标记（每组可以有三种不同的颜色）。我需要能够根据地图顶部的复选框打开/关闭：组1、2、3、4以及按颜色过滤这些组的方法（例如：组1、组2、组3、组4和红色、黄色、绿色）。我最初将此设置为下拉列表；现在，我在获取任何复选框以响应这些单击事件时遇到问题。我不是一个经验丰富的开发人员，所以我提前道歉，如果我没有正确解释这一点，任何建议都是感激的。代码如下： <!DOCTYPE html> <!-- saved from url=(0014)about:inter
<!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 Tool</Title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>jQuery Header</h1>
</div><!-- /header -->
<br>
</div>
<br>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=myKey&sensor=false">
</script>
<br>
<script>
var map;
var markersArray = [];
var infoWindow;
var places = [
['loc1', 47.364, -92.690, 12, '<h2>place 1</h2>'], //Test RED
['loc2', 43.711, -95.719, 1, '<h2>place 2</h2>'], //Test YLW
['loc3', 44.947, -92.854, 2, '<h2>place 3</h2>'], //Test GRN
['loc4', 45.899, -91.521, 10, '<h2>place 4</h2>'], //Test RED
['loc5', 45.223, -91.127, 5, '<h2>place 5</h2>'], //Test YLW
['loc6', 46.448, -90.166, 2, '<h2>place 6</h2>'], //Test GRN
['loc7', 40.471, -107.580, 3, '<h2>place 7</h2>'], //Test RED
['loc8', 38.208, -104.574, 11, '<h2>place 8</h2>'], //Test YLW
['loc9', 39.623, -104.452, 2, '<h2>place 9</h2>'], //Test GRN
['loc10', 33.186, -101.407, 3, '<h2>place 10</h2>'], //Test RED
['loc11', 32.210, -103.262, 9, '<h2>place 11</h2>'], //Test YLW
['loc12', 33.991, -103.858, 4, '<h2>place 12</h2>'], //Test GRN
['loc13', 47.364, -92.690, 3, '<h2>place 1</h2>'], //Test RED
['loc14', 43.711, -95.719, 1, '<h2>place 2</h2>'], //Test YLW
['loc15', 44.947, -92.854, 6, '<h2>place 3</h2>'], //Test GRN
['loc16', 45.899, -91.521, 3, '<h2>place 4</h2>'], //Test GRN
['loc17', 45.223, -91.127, 8, '<h2>place 5</h2>'], //Test YLW
['loc18', 46.448, -90.166, 2, '<h2>place 6</h2>'], //Test GRN
['loc19', 40.471, -107.580, 0, '<h2>place 7</h2>'], //Test RED
['loc20', 38.208, -104.574, 1, '<h2>place 8</h2>'], //Test GRN
];
//alternate btw 3 different colored markers for this..
var icons = [
'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',
];
// 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);
} else {
markersArray[i].setVisible(false);
}
}
}
function initialize() {
createMap();
initMarkers();
//init the select box where you show/hide the markers per category
var checkbox=document.getElementById('checkbox');
checkbox.onclick = function() {
var category = this.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="" value="0">All Groups  
<input type="checkbox" name="Group 1" value="1">Group 1
<input type="checkbox" name="Group 2" value="2">Group 2
<input type="checkbox" name="Group 3" value="3">Group 3
<input type="checkbox" name="Group 4" value="4">Group 4
<input type="checkbox" name="Group 5" value="5">Red
<input type="checkbox" name="Group 6" value="6">Yellow
<input type="checkbox" name="Group 7" value="7">Green
</form>
</div>
</body>
</html>
网络工具
jQuery头
var映射；
var-markersArray=[]；
var信息窗口；
变量位置=[
[loc1'，47.364，-92.690,12，'place1']，//测试红色
[loc2'，43.711，-95.719，1，'位置2']，//测试YLW
[loc3'，44.947，-92.854，2，'place 3']，//测试GRN
[loc4'，45.899，-91.521,10，'位置4']，//测试红色
[loc5'，45.223，-91.127,5'，place 5']，//测试YLW
[loc6'，46.448，-90.166,2，'place 6']，//测试GRN
[loc7'，40.471，-107.580，3，'Place7']，//测试红色
[loc8'，38.208，-104.574,11，'位置8']，//测试YLW
[loc9'，39.623，-104.452,2，'place9']，//测试GRN
[loc10'，33.186，-101.407,3，'place10']，//测试红色
[loc11'，32.210，-103.262，9，'place11']，//测试YLW
[loc12'，33.991，-103.858,4，'放置12']，//测试GRN
[loc13'，47.364，-92.690,3，'位置1']，//测试红色
[loc14'，43.711，-95.719，1，'位置2']，//测试YLW
[loc15'，44.947，-92.854,6，'位置3']，//测试GRN
[loc16'，45.899，-91.521,3，'位置4']，//测试GRN
[loc17'，45.223，-91.127,8，'位置5']，//测试YLW
[loc18'，46.448，-90.166,2，'place 6']，//测试GRN
[loc19'，40.471，-107.580,0，'place 7']，//测试红色
[loc20'，38.208，-104.574，1，'位置8']，//测试GRN
];
//顺便说一句，为该项目提供3个不同颜色的标记。。
变量图标=[
'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',
];
//内布拉斯加州中部的中心地图
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您正在尝试传递表单的值，而不是复选框
此外，我相信在前进的过程中，您还将面临其他问题，但这将使您的代码“正常工作”：
checkbox.onclick=function（）{
var checkedboxs=$（'#checkbox>input:checkbox:checked'）；
对于（变量i=0；i
我看到的其他问题是，当选中多个复选框时，只能从循环中最后一个复选框的值中获取标记
您可能想尝试以下方法：
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);
}
}
}
函数显示MarkersByCategory（类别）{
对于（var i=0；iYou提到我还有其他问题，你能建议我如何解决这些问题吗？有人知道我如何控制颜色组吗？过滤搜索组件吗？还有，如果我能刷新地图并清除最近的选择，那将是最好的。任何帮助都将不胜感激。@BobC其他问题与多重选中BO有关xes已检查。我提交的代码可以帮助您解决问题。要解决您的其他问题，评论太长，因此请发布一个新问题，以便能够回答。如果我提供的上述答案有帮助，请将其标记为已接受。
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);
}
}
}