时间戳

首页 > 解决方案 > 如何使用选择过滤 Google Maps API v.3 中 json 数据中的属性？

javascript - 如何使用选择过滤 Google Maps API v.3 中 json 数据中的属性？

问题描述

我想用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>

标签： javascriptjsongoogle-maps-api-3google-maps-markers

解决方案

您正在加载地图上的所有标记以开始。过滤它们的一种选择是将要过滤它们的数据添加到标记（作为属性）：

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, add magnitude as a "custom property"
  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    mag: results.features[i].properties.mag
  });
  gmarkers.push(marker);
}

然后按该值过滤标记：

// Function to filter markers by category
var filterMarkers = function(category) {
  switch (category) {
    case "4.5=<":
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        // If is same category or category not picked
        if (marker.mag <= 4.5) {
          marker.setVisible(true);
        }
        // Categories don't match 
        else {
          marker.setVisible(false);
        }
      }
      break;
    case "4.6 to 4.9":
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        // If is same category or category not picked
        if (4.6 <= marker.mag && marker.mag <= 4.5) {
          marker.setVisible(true);
        }
        // Categories don't match 
        else {
          marker.setVisible(false);
        }
      }
      break;
    case ">=5":
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        // If is same category or category not picked
        if (5 <= marker.mag) {
          marker.setVisible(true);
        }
        // Categories don't match 
        else {
          marker.setVisible(false);
        }
      }
      break;
    default:
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        marker.setVisible(true);
      }
  }
}

概念证明小提琴

在此处输入图像描述

代码片段：

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: "" + results.features[i].properties.mag,
      mag: results.features[i].properties.mag
    });
    gmarkers.push(marker);
  }
}

// Function to filter markers by category
var filterMarkers = function(category) {
  console.log("category=" + category);
  switch (category) {
    case "4.5=<":
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        // If is same category or category not picked
        if (marker.mag <= 4.5) {
          marker.setVisible(true);
        }
        // Categories don't match 
        else {
          marker.setVisible(false);
        }
      }
      break;
    case "4.6 to 4.9":
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        // If is same category or category not picked
        if (4.6 <= marker.mag && marker.mag <= 4.5) {
          marker.setVisible(true);
        }
        // Categories don't match 
        else {
          marker.setVisible(false);
        }
      }
      break;
    case ">=5":
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        // If is same category or category not picked
        if (5 <= marker.mag) {
          marker.setVisible(true);
        }
        // Categories don't match 
        else {
          marker.setVisible(false);
        }
      }
      break;
    default:
      for (i = 0; i < gmarkers.length; i++) {
        marker = gmarkers[i];
        marker.setVisible(true);
      }
  }
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 90%;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>

<div class="mapWrap">
  <div id="map-canvas"></div>

  <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>

推荐阅读