我想使用 select 过滤 google map api 中 json 数据中的两个属性。
在这里，我正在研究谷歌开发人员的示例。我的问题出在java文件中的过滤器中。
我想过滤掉地震的震级和状态。我还没有找到一种方法来做到这一点。
有人可以帮我吗？
提前致谢
请参阅:http://jsfiddle.net/Alisson_BRA/9dzj49op/5/
完整 JSON:https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js
HTML:
<html>
<head>
<style>
<link rel="stylesheet" href="style.css">
</style>
</head>
<body>
<script>
var gmarkers1 = [];
var markers1 = [];
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(2.8,-187.3),
mapTypeId: 'terrain',
streetViewControl: false,
mapTypeControl: false
});
var script = document.createElement('script');
script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
document.getElementsByTagName('head')[0].appendChild(script);
}
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
}
gmarkers1.push(marker1);
filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
else {
marker.setVisible(false);
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
<div class="mapWrap">
<div class="investCast">
<select id="mag" onchange="filterMarkers(this.value);">
<option value="">Selected the magnitude</option>
<!-- value="4.5=<" Is this correct? I want to load all the values less or equal than 4.5 -->
<option value="4.5=<">Less than or equal 4.5</option>
<!-- value="4.6 to 4.9=<" Is this correct? I want to load all the values between 4.6 to 4.9 -->
<option value="4.6 to 4.9">Between 4.6 and 4.9</option>
<!-- value="4.6 to 4.9=<" Is this correct? I want to load all the values greater or equal 5 -->
<option value=">=5">Greater than or equal 5</option>
</select>
</div>
</div>
<div class="mapWrap">
<div class="investCast">
<select id="status" onchange="filterMarkers(this.value);">
<option value="">Selected the status</option>
<option value="REVIEWED">REVIEWED</option>
<option value="AUTOMATIC">AUTOMATIC</option>
<option value="PUBLISHED">PUBLISHED</option>
</select>
</div>
</div>
<div id="map"></div>
</body>
</html>
最佳答案
在过滤标记的函数中，您应该考虑两个选择元素的大小和状态的状态。我稍微修改了您的代码并添加了按这两个值进行过滤的函数。看看下面的代码片段。
var gmarkers = [];
var markers = [];
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(30, 0),
mapTypeId: 'terrain',
streetViewControl: false,
mapTypeControl: false
});
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
document.getElementsByTagName('head')[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1], coords[0]);
//Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: "Mag: " + results.features[i].properties.mag + " - " + "Status: " + results.features[i].properties.status,
mag: results.features[i].properties.mag,
status: results.features[i].properties.status
});
gmarkers.push(marker);
}
}
// Function to filter markers by category
var filterMarkers = function(category) {
console.log("category=" + category);
const statusEl = document.getElementById("status");
const magEl = document.getElementById("mag");
switch (category) {
case "4.5=<":
case "4.6 to 4.9":
case ">=5":
filterByMagnitudeAndStatus(category, statusEl.value);
break;
case "REVIEWED":
case "AUTOMATIC":
case "PUBLISHED":
filterByMagnitudeAndStatus(magEl.value, category);
break;
default:
filterByMagnitudeAndStatus(magEl.value, statusEl.value);
} // Fecha o switch (category)
} // Fecha o Function to filter
function filterByMagnitudeAndStatus(magnitude, status) {
//debugger;
for(const marker of gmarkers) {
marker.setVisible(false);
}
const filteredArrayMagnitude = gmarkers.filter(function(marker){
return magnitude === "4.5=<" ? marker.mag <= 4.5 : (magnitude === "4.6 to 4.9" ? 4.6 <= marker.mag && marker.mag <= 4.9 : (magnitude === ">=5" ? 5 <= marker.mag : (magnitude === "" ? true : false)));
});
const filteredArrayMagnitudeAndStatus = filteredArrayMagnitude.filter(function(marker) {
return status==="REVIEWED" ? marker.status == "REVIEWED" : (status==="AUTOMATIC" ? marker.status == "AUTOMATIC" : (status==="PUBLISHED" ? marker.status == "PUBLISHED" : (status==="" ? true : false)));
});
for (const marker of filteredArrayMagnitudeAndStatus) {
marker.setVisible(true);
}
}#map {
height: 300px;
}
html,
body {
height: 400px;
margin: 0;
padding: 0;
}<div><h2 id="title">Earthquakes</h2></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
</script>
<div class="mapWrap">
<div class="investCast">
<select id="mag" onchange="filterMarkers(this.value);">
<option value="">Selected the magnitude</option>
<option value="4.5=<">Less than or equal 4.5</option>
<option value="4.6 to 4.9">Between 4.6 and 4.9</option>
<option value=">=5">Greater than or equal 5</option>
</select>
</div>
</div>
<div class="mapWrap">
<div class="investCast">
<select id="status" onchange="filterMarkers(this.value);">
<option value="">Selected the status</option>
<option value="REVIEWED">REVIEWED</option>
<option value="AUTOMATIC">AUTOMATIC</option>
<option value="PUBLISHED">PUBLISHED</option>
</select>
</div>
</div>
<div id="map"></div>希望这会有所帮助!
关于javascript - 如何使用 select 过滤 Google Maps API v.3 中 json 数据中的两个属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51800217/