如何在Google Maps API v3中用下拉框筛选JSON数据的地震震级

我来帮你搞定这个震级筛选的问题！你的代码目前有几个关键点需要调整，我会一步步给你讲清楚怎么修改：

关键问题分析与修改方向 #

1. 标记未存储震级数据：你现在创建Marker的时候没有把地震的mag值绑定到标记上，后续筛选根本拿不到这个数据，所以第一步要给每个Marker添加mag属性。
2. 下拉框Value设置不合理：原来的value格式（比如"4.5=<"）不好在JS里判断，换成更清晰的标识，比如用le4.5表示小于等于4.5，bt4.6-4.9表示区间，ge5表示大于等于5。
3. 筛选逻辑不匹配需求：原有的filterMarkers函数是按category匹配，现在要改成根据震级范围来判断标记是否显示。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
.mapWrap {
  position: relative;
  height: 100vh;
  width: 100%;
}
#map {
  height: 100%;
  width: 100%;
}
.investCast {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background: white;
  padding: 10px;
  border-radius: 4px;
}
</style>
</head>
<body>
<div class="mapWrap">
  <div id="map"></div>
  <div class="investCast">
    <select id="mag" onchange="filterMarkers(this.value);">
      <option value="">Select the magnitude</option>
      <option value="le4.5">Less than or equal 4.5</option>
      <option value="bt4.6-4.9">Between 4.6 and 4.9</option>
      <option value="ge5">Greater than or equal 5</option>
    </select>
  </div>
</div>

<script>
var gmarkers1 = [];
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 mag = results.features[i].properties.mag;
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      // 给标记绑定震级属性
      mag: mag
    });
    // 将标记存入全局数组
    gmarkers1.push(marker);
  }
}

// 重写筛选函数
filterMarkers = function (filterValue) {
  for (var i = 0; i < gmarkers1.length; i++) {
    var marker = gmarkers1[i];
    var markerMag = marker.mag;
    var isVisible = true;

    if (filterValue === "") {
      // 选择全部，显示所有标记
      isVisible = true;
    } else if (filterValue === "le4.5") {
      // 小于等于4.5
      isVisible = markerMag <= 4.5;
    } else if (filterValue === "bt4.6-4.9") {
      // 4.6到4.9之间（包含边界）
      isVisible = markerMag >= 4.6 && markerMag <= 4.9;
    } else if (filterValue === "ge5") {
      // 大于等于5
      isVisible = markerMag >= 5;
    }

    marker.setVisible(isVisible);
  }
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

代码修改说明 #

• 标记绑定震级：在创建Marker时，通过mag: mag把当前地震的震级值附加到标记对象上，这样筛选时可以直接读取marker.mag。
• 下拉框Value优化：把每个选项的value换成了语义化的标识，让JS逻辑更容易判断。
• 筛选逻辑重构：根据选中的筛选值，分别判断标记的震级是否符合对应的范围，然后设置标记的可见性。如果选择空选项（全部），则显示所有标记。
• 样式优化：给地图容器和下拉框添加了基础样式，确保下拉框在地图上方显示（通过z-index设置层级）。

内容的提问来源于stack exchange，提问作者Alisson