jjzjj

javascript - 如何为谷歌热图创建图例？

coder 2024-05-09 原文

我使用 Google map API v3 和后端的数据库应用程序绘制了热图。

太棒了，我在我的 map 上看到了 green.->.yellow.->.red 渐变。看起来不错!

但是我怎样才能得到这些颜色的值呢？

浅绿色和深红色的平均重量是多少？

我可以使用 goolge API 实现这样的“图例”，还是我需要编写某种自定义 JS 功能？

最佳答案

截至今天，似乎还没有通过 API 获取热图图例的官方方法，这意味着您只能靠自己了。要构建图例，您需要以下两种成分。

  1. 热图渐变颜色的定义
  2. 最大密度 - 即图例的高端(低端始终为 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 中使用，甚至在当前版本中也可能无法在所有情况下使用。

关于javascript - 如何为谷歌热图创建图例？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19385363/

热图何为39gradientjavascriptgoogle-maps-api-3heatmap

有关javascript - 如何为谷歌热图创建图例？的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  3. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  4. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  5. ruby - 如何为 emacs 安装 ruby​​-mode - 2

    我刚刚为fedora安装了emacs。我想用emacs编写ruby。为ruby​​提供代码提示、代码完成类型功能所需的工具、扩展是什么？ 最佳答案 ruby-mode已经包含在Emacs23之后的版本中。不过，它也可以通过ELPA获得。您可能感兴趣的其他一些事情是集成RVM、feature-mode(Cucumber)、rspec-mode、ruby-electric、inf-ruby、rinari(用于Rails)等。这是我当前用于Ruby开发的Emacs配置:https://github.com/citizen428/emacs

  6. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  7. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  8. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法

  9. ruby - 使用多个数组创建计数 - 2

    我正在尝试按0-9和a-z的顺序创建数字和字母列表。我有一组值value_array=['0','1','2','3','4','5','6','7','8','9','a','b'，'光盘'，'e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','','u','v','w','x','y','z']和一个组合列表的数组，按顺序，这些数字可以产生x个字符，比方说三个list_array=[]和一个当前字母和数字组合的数组(在将它插入列表数组之前我会把它变成一个字符串，]current_combo['0','0','0']

  10. Observability：从零开始创建 Java 微服务并监控它 （二） - 2

    这篇文章是继上一篇文章“Observability：从零开始创建Java微服务并监控它（一）”的续篇。在上一篇文章中，我们讲述了如何创建一个Javaweb应用，并使用Filebeat来收集应用所生成的日志。在今天的文章中，我来详述如何收集应用的指标，使用APM来监控应用并监督web服务的在线情况。源码可以在地址 https://github.com/liu-xiao-guo/java_observability 进行下载。摄入指标指标被视为可以随时更改的时间点值。当前请求的数量可以改变任何毫秒。你可能有1000个请求的峰值，然后一切都回到一个请求。这也意味着这些指标可能不准确，你还想提取最小/

随机推荐