如何为Google热图创建图例？

1 回答

• 26

  截至今天，似乎没有官方的方法通过API获取热图传奇，这意味着你在这里独立 . 要构建图例，您需要以下两个成分 .

  • 热图的渐变颜色的定义

  • 最大密度 - 即图例的高端（低端始终为0）

  先决条件

  以下代码段将假定您的HTML包含图例和图例渐变的容器，并且您已创建有效的 Map 和热图 .

  <div id="map"></div>
  <div id="legend">
      <div id="legendGradient"></div>
  </div>
  <script type="text/javascript">
      function initialize() {
          map = new google.maps.Map(document.getElementById('map'), {
              ...
          });
  
          heatmap = new google.maps.visualization.HeatmapLayer({
              data: ...
          });
  
          heatmap.setMap(map);
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  

  渐变

  热图实际上包含属性 gradient ，但是，该属性未填充默认渐变，但仅保留已手动分配给热图的那些渐变规范 . 因此，为了获得精确的梯度规格，您需要自己定义颜色 . 之后，您只需使用CSS在图例中绘制渐变 .

  var gradient = [
      'rgba(0, 255, 255, 0)',
      'rgba(0, 255, 255, 1)',
      ...
  ];
  
  heatmap.set('gradient', gradient);
  
  var gradientCss = '(left';
  for (var i = 0; i < gradient.length; ++i) {
      gradientCss += ', ' + gradient[i];
  }
  gradientCss += ')';
  
  $('#legendGradient').css('background', '-webkit-linear-gradient' + gradientCss);
  $('#legendGradient').css('background', '-moz-linear-gradient' + gradientCss);
  $('#legendGradient').css('background', '-o-linear-gradient' + gradientCss);
  $('#legendGradient').css('background', 'linear-gradient' + gradientCss);
  

  最大密度

  最高密度无法通过API正式提供 . 但是，逻辑告诉我们必须将值存储在对象的某个位置 . 使用Chrome的JavaScript控制台进行一些研究后，我发现该值存储在 heatmap['gm_bindings_']['data'][158]['kd']['D'] 下 . 但是，只有在渲染 Map 后才能设置该值 . 因此，您需要将对该字段的访问权限包装到 tilesloaded 事件处理程序中 .

  一旦获得最大密度，它就会被认为是高度为 15px 的梯度 .

  google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
      var maxIntensity = heatmap['gm_bindings_']['data'][158]['kd']['D'];
      var legendWidth = $('#legendGradient').outerWidth();
  
      for (var i = 0; i <= maxIntensity; ++i) {
          var offset = i * legendWidth / maxIntensity;
          if (i > 0 && i < maxIntensity) {
              offset -= 0.5;
          } else if (i == maxIntensity) {
              offset -= 1;
          }
  
          $('#legend').append($('<div>').css({
              'position': 'absolute',
              'left': offset + 'px',
              'top': '15px',
              'width': '1px',
              'height': '3px',
              'background': 'black'
          }));
          $('#legend').append($('<div>').css({
              'position': 'absolute',
              'left': (offset - 5) + 'px',
              'top': '18px',
              'width': '10px',
              'text-align': 'center'
          }).html(i));
      }
  });
  

  包装好了

  可以在JSFiddle上找到上述代码的工作示例 .

  

  请注意，确定最大密度的方式完全是非官方的，没有记录 . 它可能在API的未来版本中不起作用，甚至在当前版本中它可能在所有情况下都不起作用 .

  回复于 2024-05-03T13:14:24+08:00