如果我点击第一个复选框＆amp;然后点击另一个选择＆amp;取消选择。
似乎主要问题是if(document.getElementById('mapCheck').checked) - 这一行。
如果删除此行，则标记将仅添加到地图中，但不能根据复选框的check属性删除（显然因为没有if else条件来检查复选框选中的属性）。 / p>
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<!-- For dynamic table -->
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
table#appraiserTable tr:nth-child(even) {
background-color: #eee;
}
table#appraiserTable tr:nth-child(odd) {
background-color:#fff;
}
table#appraiserTable th {
background-color: black;
color: white;
}
</style>
<script>
var lat=[10,20,30,40];
var lon=[10,20,30,40];
var appraiserName=["A1","A2","A3","A4"];
var appraiserLocation=["L1","L2","L3","L4"];
document.write("<table id=appraiserTable border=1 style=margin-top:10px; margin-left:10px;>")
document.write("<tr><th>Select</th><th>Appraiser Name</th><th>Location</th></tr>");
for (row=0; row<lat.length; row++) {
document.write("<tr>")
for (col=1; col<=3; col++) {
if(col==1)
document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' value='checked' onchange='showOrHideMarkers("+lat[row]+","+lon[row]+");'/></td>")
if(col==2)
document.write("<td width='200'>"+appraiserName[row]+"</td>")
if(col==3)
document.write("<td width='350'>"+appraiserLocation[row]+"</td>")
}
document.write("</tr>")
}
document.write("</table>")
var map;
var markers=[];
//load all markers to an array
function loadMarkers(){
for(var i=0;i<lat.length;i++)
{
var markerCenter = new google.maps.LatLng(lat[i],lon[i]);
var marker=new google.maps.Marker({
position: markerCenter,
});
markers.push(marker);
}
}
// Shows or Hides markers currently in the array.
function showOrHideMarkers(latitude,longitude) {
var index;
for(var i=0;i<lat.length;i++)
{
if(lat[i]==latitude && lon[i]==longitude)
{
index=i;
break;
}
}
//User selects the check box to see the marker in Google Map
if(document.getElementById('mapCheck').checked)
{
console.log(latitude+" : "+longitude+" : "+index)
markers[index].setMap(map);
}
//User unselects the checkbox not to see the marker
else
{
console.log(latitude+" : "+longitude+" : "+index)
markers[index].setMap(null);
}
}
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
//Initializing the Map
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
div.absolute {
position: absolute;
top: 10px;
right: 10px;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;" class="absolute"></div>
</body>
</html>
答案 0 :(得分：0)
几个错误。第一：
if(document.getElementById('mapCheck').checked)
不起作用。你有4个复选框，你正在使用getElementById，它将获得第一个带有id的复选框。基本上只有第一个复选框才能以这种方式工作。
二。虽然您可以使用SetMap，但最好在标记上使用setVisible。
祝你的项目好运。这是更新的工作代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!-- For dynamic table -->
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
table#appraiserTable tr:nth-child(even) {
background-color: #eee;
}
table#appraiserTable tr:nth-child(odd) {
background-color:#fff;
}
table#appraiserTable th {
background-color: black;
color: white;
}
</style>
<script>
var lat=[10,20,30,40];
var lon=[10,20,30,40];
var appraiserName=["A1","A2","A3","A4"];
var appraiserLocation=["L1","L2","L3","L4"];
document.write("<table id=appraiserTable border=1 style=margin-top:10px; margin-left:10px;>")
document.write("<tr><th>Select</th><th>Appraiser Name</th><th>Location</th></tr>");
for (row=0; row<lat.length; row++) {
document.write("<tr>")
for (col=1; col<=3; col++) {
if(col==1)
document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' value='checked' onchange='showOrHideMarkers(this,"+lat[row]+","+lon[row]+");'/></td>")
if(col==2)
document.write("<td width='200'>"+appraiserName[row]+"</td>")
if(col==3)
document.write("<td width='350'>"+appraiserLocation[row]+"</td>")
}
document.write("</tr>")
}
document.write("</table>")
var map;
var markers=[];
//load all markers to an array
function loadMarkers(){
for(var i=0;i<lat.length;i++)
{
var markerCenter = new google.maps.LatLng(lat[i],lon[i]);
var marker=new google.maps.Marker({
position: markerCenter,
});
marker.setMap(map);
marker.setVisible(false)
markers.push(marker);
}
}
// Shows or Hides markers currently in the array.
function showOrHideMarkers(o,latitude,longitude) {
var index;
for(var i=0;i<lat.length;i++)
{
if(lat[i]==latitude && lon[i]==longitude)
{
index=i;
break;
}
}
//User selects the check box to see the marker in Google Map
if(o.checked)
{
console.log('showing: '+index)
markers[index].setVisible(true)
}
//User unselects the checkbox not to see the marker
else
{
console.log('hiding: '+index)
markers[index].setVisible(false)
}
}
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
//Initializing the Map
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
div.absolute {
position: absolute;
top: 10px;
right: 10px;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;" class="absolute"></div>
</body>
</html>