-1
私は Googleマップのピンマーカーは非表示になっていますが、正しい方法では表示されません。助言がありますか？
私はjsのフィドルを設定する（しかし、マップをロードするために正常に動作していないので、私は自分でjsfiddleを使ったことがない。私はそれをリンクしますが、マップを表示するために取得することはできません） https://jsfiddle.net/96bpp6sw/2/ 3つのボタンを使って地図のピンを隠す/表示することが問題です。動作が間違っています。すべてのチェックボックスを選択すると、すべてのピンが選択されます。チェックボックス「雲」だけがチェックされている場合は、それが画面上の唯一の選択でなければなりません。さらに詳しい情報...配列内のインデックス6は、ボタンは "雲、雨、水"をクリックすると関連付けられています。
あなたの$(document).ready 関数内filterMarkersを移動しても、機能のために、あなたのパラメータとして
をthisを渡し、チェックボックスをかどうかを確認する必要が
<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