Javascript 如何使用select在Google Maps API v.3中过滤json数据中的两个属性？_Javascript_Json_Google Maps_Select_Google Maps Api 3

Javascript 如何使用select在Google Maps API v.3中过滤json数据中的两个属性？

javascript json google-maps select google-maps-api-3

Javascript 如何使用select在Google Maps API v.3中过滤json数据中的两个属性？,javascript,json,google-maps,select,google-maps-api-3,Javascript,Json,Google Maps,Select,Google Maps Api 3,我想用select在googlemapsapi中过滤json数据中的两个属性在这里，我正在研究一个谷歌开发者的例子。我的问题是java文件中的过滤器我想过滤掉地震的震级和状态。我还没有找到这样做的方法有人能帮我吗提前谢谢请参见：完整JSON: HTML: var gmarkers1=[]； var markers1=[]； var映射；函数initMap（）{ map=new google.maps.map（document.getElementById（'map'）{ 缩放：2

我想用select在googlemapsapi中过滤json数据中的两个属性

在这里，我正在研究一个谷歌开发者的例子。我的问题是java文件中的过滤器

我想过滤掉地震的震级和状态。我还没有找到这样做的方法

有人能帮我吗

提前谢谢

请参见：

完整JSON:

HTML:


var gmarkers1=[]；
var markers1=[]；
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：2，
中心：新google.maps.LatLng（2.8，-187.3），
mapTypeId:'地形'，
街景控制：错误，
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（脚本）；
}
window.eqfeed\u callback=函数（结果）{
对于（var i=0；i

在筛选标记的函数中，您应该考虑大小和状态选择元素的状态。我稍微修改了您的代码，并添加了按这两个值过滤的函数。请看下面的代码片段

var-gmarkers=[]；
var标记=[]；
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：1，
中心：新google.maps.LatLng（30,0），
mapTypeId:'地形'，
街景控制：错误，
mapTypeControl:false
});
//创建标记并将USGS URL设置为源。
var script=document.createElement（'script'）；
//此示例使用存储在中的GeoJSON的本地副本
// 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（脚本）；
}
//循环遍历结果数组，并为每个结果放置一个标记
//一组坐标。
window.eqfeed\u callback=函数（结果）{
对于（var i=0；i

在筛选标记的函数中，您应该考虑大小和状态的两个选择元素的状态。我稍微修改了您的代码，并添加了按这两个值筛选的函数。请查看以下代码片段

var-gmarkers=[]；
var标记=[]；
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：1，
中心：新google.maps.LatLng（30,0），
mapTypeId:'地形'，
街景控制：错误，
mapTypeControl:false
});
//创建标记并将USGS URL设置为源。
var script=document.createElement（'script'）；
//此示例使用存储在中的GeoJSON的本地副本
// 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（脚本）；
}
//循环遍历结果数组，并为每个结果放置一个标记
//一组坐标。
window.eqfeed\u callback=函数（结果）{
对于（var i=0；i<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>