如何使用选择过滤 Google Maps API v.3 中 json 数据中的两个属性？答案

【问题标题】：How to filter two properties in json data in Google Maps API v.3 with select?如何使用选择过滤 Google Maps API v.3 中 json 数据中的两个属性？
【发布时间】：2019-01-18 21:05:15
【问题描述】：

我想用select过滤google maps 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>

【问题讨论】：

标签： javascript json google-maps select google-maps-api-3

【解决方案1】：

在过滤标记的函数中，您应该考虑两个选择元素的状态，以了解大小和状态。我稍微修改了您的代码并添加了按两个值过滤的功能。看看下面的代码sn-p。

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>

我希望这会有所帮助！

【讨论】：