【发布时间】：2018-10-30 13:32:22
【问题描述】：
我想用 select 过滤 google maps api 中 json 数据中的属性。
我在这里看到了一些示例，但我没有找到加载外部文件 json 并过滤属性的示例。
在这里，我正在研究developers.google 的示例。我的问题出在 java 文件中的过滤器中。我还没有找到这样做的方法。
我想过滤掉地震的震级。
有人可以帮帮我吗？
提前致谢
请看：http://jsfiddle.net/Alisson_BRA/9dzj49op/1/
完整的 JSON：https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js
JSON（示例）、HTML 和 JS：
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"mag": 5.4,
"place": "48km SSE of Pondaguitan, Philippines",
"status": "AUTOMATIC" },
"geometry": {
"type": "Point",
"coordinates": [126.3832, 5.9775] },
},
{
"type": "Feature",
"properties": {
"mag": 5.7,
"place": "35km ESE of Ndoi Island, Fiji",
"status": "REVIEWED" },
"geometry": {
"type": "Point",
"coordinates": [-178.3725, -20.753] },
},
]
}
<!DOCTYPE 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);
// Function to filter markers by category
filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// Categories don't match
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 id="map"></div>
<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>
</body>
</html>
【问题讨论】：
标签： javascript json google-maps-api-3 google-maps-markers