Question

我试图弄清楚如何根据地震数据地图添加自定义图例，其中圆圈显示幅度。如果你愿意，我已经能够添加“图例”框，但似乎无法弄清楚如何添加幅度变量说明。

到目前为止，这是我的代码。

<head>
  <title>Sample Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      height: 100%;
    }

    #info-box {
      background-color: white;
      border: 1px solid black;        
      padding: 10px;
      position: absolute;
      left: 45%;
      margin-left: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
    }

    #legend {
      background: white;
      padding: 10px;
      border: 1px solid black;
      margin-left: 10px;
      border-radius: 5px;
    }

    #title {
      background: white;
      padding: 10px;
      border: 1px solid black;
      margin-top: 10px;
      border-radius: 5px;
    }  

  </style>
</head>
<body>
  <div id="map"></div>
  <div id="info-box">Earthquake Data</div>
  <div id="legend">Legend</div>
  <div id="title">USGS 4.5+ Magnitude Earthquake Data in the Last 30 days </div>
  <script>

    var map;
      function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 0, lng: 0},
      zoom: 2    
      });

    var marker = new google.maps.Marker({
      position: {lat: 47.2448, lng: -122.4378},
      map: map,
      title: 'Global View'
      });

    map.data.setStyle(function(feature) {
      var magnitude = feature.getProperty('mag');
      return {
      icon: getCircle(magnitude)
      };
    });

    function getCircle(magnitude) {
      var circle = {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'purple',
            fillOpacity: .2,
        scale: Math.pow(2, magnitude) / 2,
        strokeColor: 'yellow',
        strokeWeight: .5
      };
      return circle;
    }

    map.data.addListener('click', function(event) {
        document.getElementById('info-box').textContent =
            event.feature.getProperty("title");
      });

    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(
      document.getElementById('legend'));

    map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('title'));

    map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(
      document.getElementById('info-box'));

    map.data.loadGeoJson('4.5plusmeq.json');
    }

  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"
      async defer></script>
</body>

链接到当前显示的地图： http://students.washington.edu/sbuffor/samplemap.html

Answer 1

我不确定您要加载到legend框中的内容，但这可能有帮助吗？

您似乎希望使用与用户点击的legend相关的数据来更新event。您应该可以在现有listener内执行此操作，例如：

document.getElementById('legend').textContent = 'Mag Type: ' + event.feature.getProperty('magType');

希望这很有帮助，但它可能完全取决于您的目标！

<强>更新

是的，您提供的图例是图片。如果您打开使用图片，只需将图片包含在图例div中，如：

<div id="map">
    <img src="http://www.bencomeau.com/img/legend.png" alt="Legend">
</div>

您还要从CSS中删除background的{{1}}和border/border-radius属性，以便它看起来合适。

我已通过JavaScript完成此操作以产生这种外观：

Google Maps API自定义图例

1 个答案: