Бих искал да филтрирам свойства в json данни в google maps api с select.
Видях няколко примера тук, но не намерих пример, който зарежда външен файл 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="/bgstyle.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>
