如何创建谷歌热图的传奇？ [英] HowTo create legend for google Heatmap?
问题描述
我使用Google Maps API v3在后端使用了数据库应用程序绘制了热图。
酷，我看到绿色.->。yellow .->。red在我的地图上散乱。看起来很好！
但是我怎么能得到这些颜色的值？
什么是浅绿色的平均重量颜色和暗红色？
我可以使用goolge API实现这样的图例还是我需要编写某种自定义JS功能？
$ b $到目前为止，似乎没有官方的方式来通过API获取热图图例，这意味着你在这里是独立的。要构建图例，您需要以下两种成分。- 热图的渐变颜色的定义
- 最大密度 - 即图例的高端（低端始终为0）
先决条件
以下代码片断会假设您的HTML包含图例和图例渐变的容器，并且您已创建了有效的映射和热图。
< div id =map>< / div>
< div id =legend>
< div id =legendGradient>< / div>
< / div>
< script type =text / javascript>
函数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>
渐变
属性渐变，但是，它并未填充为默认渐变，但仅保存您手动分配给热图的那些渐变规格。因此，为了获得精确的渐变规格，您需要自己定义颜色。之后，您可以简单地使用CSS在图例中绘制渐变。
var gradient = [
'rgba（0， 255,255,0）'，
'rgba（0,255,255,1）'，
...
];
heatmap.set（'gradient'，gradient）;
$ b $ var gradientCss ='（left';
for（var i = 0; i< gradient.length; ++ i）{
gradientCss + ='，'+渐变[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'] 。但是，该值只能在地图渲染后设置。因此，您需要将对该字段的访问权限封装到 tilesloaded 事件处理程序中。
一旦您获得最大密度，为图例生成刻度和标签很简单。下面的片段在图例的渐变下面创建了滴答和标签，假设它的高度为 15px 。
google.maps.event.addListenerOnce（map，'tilesloaded'，function（）{
var maxIntensity = heatmap ['gm_bindings _'] ['data'] ['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（{$ b $'position'：'absolute'，
'left'：offset +'px'，
'top'：'15px'，
'width'：' 1px'，
'height'：'3px'，
'ba ckground'：'black'
}））;
$（'＃legend'）。append（$（'< div>）。css（{$ b $'position'：'绝对'，
'left':(偏移-5）+'px'，
'top'：'18px'，
'width'：'10px'，
' text-align'：'center'
}）。html（i））;
}
}）;
包装物品
一个工作示例上面的代码可以在 JSFiddle 上找到。
请注意，密度的确定是完全非官方的和无证的。它在未来的API版本中可能不起作用，甚至在当前版本中它可能无法在所有情况下工作。
I have drawn heatmap using Google maps API v3 with the DB application at the backend.
Cool, I see green.->.yellow.->.red fradient over my map. Looks fine!
But how can I get values for these colors?
What's avg weight for light-green color and dark-red?
Can I implement such "legend" using goolge API or I need to write some kind of custom JS functionality?
As of today, there seems to be no official way to obtain the heatmap legend through the API which means you're on your own here. To construct the legend you'll need the following two ingredients.
- The definition of the heatmap's gradient colors
- The maximum density - that is the high end of the legend (the low end is always 0)
Prerequisites
The following code snippets will assume that your HTML contains containers for the legend and the legend's gradient and that you have created a valid map and heatmap.
<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>
The Gradient
The heatmap actually contains a property gradient which is, however, not populated for the default gradient but only holds those gradient specifications that you have assigned manually to the heatmap. Hence, in order to obtain the exact gradient specifications, you'll need to define the colors yourself. Afterwards you can simply draw the gradient in the legend using 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);
The Maximum Density
The maximum density is not available officially through the API. However, logic tells us that the value must be stored somewhere on the object. Doing a little research with Chrome's JavaScript console I found the value stored under heatmap['gm_bindings_']['data'][158]['kd']['D']. The value will, however, only be set after the map has rendered. Thus, you'll need to wrap your access to the field into a tilesloaded event-handler.
Once you got the maximum density, it's straightforward to generate ticks and labels for the legend. The following snippet creates ticks and labels beneath the legend's gradient which is assumed to be 15px in height.
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));
}
});
Wrapping Things Up
A working example of the above code can be found on JSFiddle.
Please note that the way the maximum density is determined is completely unofficial and undocumented. It might not work in future versions of the API and even in the current version it might not work in all cases.
这篇关于如何创建谷歌热图的传奇？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
