如何根据预先确定的约束值自定义热图颜色
How to customize heatmap color on pre decided constraint values?
我正在研究热图,情况是我必须根据某些约束更改热图标记的颜色,并且颜色应根据这些基本约束值进行更改。我的方法是这样的:
function HeatMapCreate(heatMapData, GetNumberFromString)
// heatMapData contains the object of LatLng and get number is the constraint
// which contains a number on the basis of which we set color
// (green if 48 and red if 36 else yellow)
{
var gradient;
var heatmap = new google.maps.visualization.HeatmapLayer(
{
data: heatMapData,
});
heatmap.setOptions({ radius: heatmap.get('20') });
if (GetNumberFromString == 36)
{
gradient = [For red color]
}
else if(GetNumberFromString == 48)
{
gradient = [For green color]
}
else
{
gradient = [For yellow color]
}
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
heatmap.setMap(map);
}
如何实现这一点?我有点惊讶这个答案没有一个答案(甚至评论),这让我觉得要么问题太糟糕,要么不可能有不同颜色的热图标记?有人可以帮我吗?
你的倒数第二行代码看起来像是你刚刚从谷歌的例子中复制出来的,该例子演示了在两个渐变之间切换。
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
老实说,这不是最好的例子;他们实际上要么将渐变设置为他们指定的渐变,要么将其设置为null,即默认渐变回到Google的默认配色方案。
相反,您要做的是已经定义了所有自己的渐变,然后在它们之间切换以响应GetNumberFromString
值。 这是一个未经测试的示例。 我最后一个选择了"蓝色",只是因为它更容易! 您可能想出自己的一组颜色;我希望有在线工具可以很快为您生成这些,例如 http://angrytools.com/gradient/
function HeatMapCreate(heatMapData, GetNumberFromString) {
var gradients = {
red: [
'rgba(255, 0, 0, 0)',
'rgba(255, 0, 0, 1)'
],
green: [
'rgba(0, 255, 0, 0)',
'rgba(0, 255, 0, 1)'
],
blue: [
'rgba(0, 0, 255, 0)',
'rgba(0, 0, 255, 1)'
]
};
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData,
radius: 20,
map: map
});
switch (GetNumberFromString) {
case 36:
heatmap.set('gradient', gradients['red']);
break;
case 48:
heatmap.set('gradient', gradients['green']);
break;
default:
heatmap.set('gradient', gradients['blue']);
break;
}
}
另请参阅:https://developers.google.com/maps/documentation/javascript/heatmaplayer
不能使用单个热图实现不同的颜色。您必须根据 GetNumberFromString 函数返回值为要显示的每种颜色使用单独的热图图层。
查看下面的代码。
function initialize() {
geocoder = new google.maps.Geocoder();
var mapProp = {
center: new google.maps.LatLng(40.785091, -73.968285),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
codeAddress("10001", 'rgba(1, 1, 0, 0)', 'rgba(1, 1, 0, 1)');
codeAddress("10002", 'rgba(255, 255, 0, 0)', 'rgba(255, 255, 0, 1)');
codeAddress("10003", 'rgba(255, 0, 0, 0)', 'rgba(255, 0, 0, 1)');
codeAddress("10004", 'rgba(0, 255, 0, 0)', 'rgba(0, 255, 0, 1)');
codeAddress("10005", 'rgba(153, 0, 153, 0)', 'rgba(153, 0, 153, 1)');
codeAddress("10006", 'rgba(1, 1, 0, 0)', 'rgba(1, 1, 0, 1)');
function codeAddress(zip, rgbA1, rgbA2) {
//var address = document.getElementById("address").value;
geocoder.geocode({
'address': zip
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var hotSpot = results[0].geometry.location;
var heatMapZip = [{
location: hotSpot
}
];
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapZip,
radius: 20,
dissapating: false
});
var gradient = [rgbA1, rgbA2];
heatmap.set('gradient', gradient);
heatmap.setMap(map);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
相关文章:
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- jQuery自定义验证比较多个输入的序列
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 在wordpress一定时间后更改自定义字段
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 自定义函数中的光标位置
- 用于检查数组中是否存在元素的javascript自定义方法
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- Meteor-添加用户自定义字段的方法不起作用
- 自定义表单验证和提交
- jQuery工具验证器自定义效果-添加&消除影响
- 可以't计算自定义谷歌地图的js
- 谷歌水印未显示在自定义搜索框中
- vaadin:使用自定义布局集成angular js
- 是否可以有条件地添加角度自定义验证约束
- 带有自定义约束的电话号码验证正则表达式
- 在一个元素上使用多个自定义验证约束
- Parsley js对验证约束和自定义错误消息进行优先级排序
- 如何根据预先确定的约束值自定义热图颜色