-1
我成立了一個js小提琴（但我從來沒有用過的jsfiddle我自己的，所以它不能正常工作，加載地圖，我會聯繫，但無法獲得地圖來顯示）https://jsfiddle.net/96bpp6sw/2/Google地圖引腳標記隱藏並顯示，但顯示方式不正確。有什麼建議麼？
我問題在於隱藏/顯示地圖引腳的3個按鈕。行爲不正確。如果選中所有複選框，則選擇所有引腳。如果複選框「雲」是唯一的複選框選中，那麼這應該是唯一的選擇在屏幕上，等等等等...
稍微更多的信息...在數組中，索引6是類別與按鈕點擊「雲，雨，水」相關聯。
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="styles/styles.css" type="text/css" media="screen">
</head>
<body>
<div id="map"></div>
<div class="category">
<div id="floating-panel">
<input type="checkbox" value="clouds" checked onclick="filterMarkers(this.value);" id="cat1"><span class="checkbox-text">Clouds</span>
<input type="checkbox" value="rain" checked onclick="filterMarkers(this.value);" id="cat2"><span class="checkbox-text">Rain</span>
<input type="checkbox" value="water" checked onclick="filterMarkers(this.value);" id="cat3"><span class="checkbox-text">Water</span>
</div>
</div>
<div class="container">
<div class="location-background">
<form class="form-wrapper cf">
<input type="text" placeholder="Search..." required>
<button type="submit">Search</button>
</form>
</div>
<div class="scroll-box">
<table class="list">
<tr class="scranton">
<th><img class="img-padding" src="images/pin-rain.png" alt ="pin image"></th>
<th><p class="align-left">The EFC, with funding from the National Fish and Wildlife Foundation (NFWF), helped to enhance the City...</p></th>
</tr>
<tr>
<th><img class="img-padding" src="images/pin-cloud.png" alt ="pin image"></th>
<th><p class="align-left">With support from the National Fish and Wildlife Foundation (NFWF),the EFC worked with a team led by the Alliance for...</p></th>
</tr>
<tr>
<th><img class="img-padding" src="images/pin-waves.png" alt ="pin image"></th>
<th><p class="align-left">Through funding from the National Fish & Wildlife Foundation (NFWF), the EFC worked with six municipalities located in Lancaster... </p></th>
</tr>
<tr>
<th><img class="img-padding" src="images/pin-waves.png" alt ="pin image"></th>
<th><p class="align-left">In 2012, Warrington Township, Pennsylvania passed a voter approved referendum committing $3 million to open space protection...</p></th>
</tr>
</table>
</div>
</div>
而且JS ...
var m = [];
var filterMarkers;
function initMap() {
var locations = [
[
"Blair County, PA", 40.453132, -78.384223,
"With support from the National Fish and Wildlife Foundation (NFWF)" +
"report.",
'<p><b>Resources</b>: <a href="https://efc.umd.edu/assets/sw_case_studies/blair_county_final.pdf" <span>Case Study Blair County, PA</span> </a></p>',
'images/pin-rain.png',
'rain'
],
["Scranton, PA", 41.408969, -75.662412,
"The EFC, with funding from the National Fish and Wildlife" +
"report.",
'<p><b>Resources</b>: <a href="https://efc.umd.edu/assets/sw_case_studies/scranton_final.pdf" <span> Case Study Scranton, PA</p>',
'images/pin-cloud.png',
'clouds'
],
["Warrington Township, PA", 40.250319, -75.166212,
"In 2012, Warrington Township, Pennsylvania passed a voter approved" +
"report.",
'<p><b>Resources</b>: <a href="https://efc.umd.edu/assets/sw_case_studies/warrington_final.pdf" <span> Case Study Warrington Township, PA</p>',
'images/pin-waves.png',
'water'
]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(39.488560, -78.065193)
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for(i = 0; i < locations.length; i++) {
var category = locations[i][6];
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][5],
animation: google.maps.Animation.DROP,
category: category,
map: map
});
m.push(marker);
// ================= code in question =================
filterMarkers = function (category) {
for (i = 0; i < locations.length; i++) {
marker = m[i];
if (marker.category === category) {
marker.setVisible(true);
}
else {
marker.setVisible(false);
}
}
}
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var ContentString =
'<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">' + locations[i][0] + '</h1>' +
'<div id="bodyContent">' +
"<p>" + locations[i][3] + "</p>" +
"<p>" + locations[i][4] + "</p>" +
'</div>' +
'</div>';
return function() {
infowindow.setContent(ContentString);
infowindow.open(map, marker);
}
})(marker, i));
}
google.maps.event.addListener(map, "click", function(event) {
infowindow.close();
});
}
謝謝，但我不知道這就是我要找的。當所有框被選中時，似乎沒有地圖上的所有針腳。 – Nick0989
我已經更新了小提琴，請看看，因爲下雨的圖像沒有透明度，您可以取消選中它以查看其他2個引腳 –
謝謝，我實際上已經發現了一種不同的方式。我會更新它。 – Nick0989