描述
我正在尝试根据api查询返回的数据向Google地图添加多个热图图层。一切似乎都正常工作但是在$ ajax.done（）完成之后（而不是在期间）错误触发。我在添加图层后尝试缩放时也注意到了这个错误。新图层不会出现在地图上。
错误消息
＆＃34;未捕获的TypeError：无法读取属性＆＃39; alpha＆＃39;未定义＆＃34;
JSFiddle ：http://jsfiddle.net/OldCode101/jLK49/
代码
(function ($) {
var map, pointArray, heatmap, dataPoints = [],
layers = [],
$loader = $('.loader, .loader-overlay'),
animation_speed = 666,
$addLayerBtn = $('.btn.action-addLayer'),
gradients = [{
"0": "rgba(255,255,255,0)",
"0.29": "rgba(148,0,0,1)",
"0.33": "rgba(170,0,0,1)",
"0.37": "rgba(191,0,0,1)",
"0.42": "rgba(212,0,0,1)",
"0.46": "rgba(233,0,0,1)",
"0.50": "rgba(255,0,0,1)",
"0.54": "rgba(255,21,21,1)",
"0.58": "rgba(255,42,42,1)",
"0.62": "rgba(255,63,63,1)",
"0.67": "rgba(255,85,85,1)",
"0.71": "rgba(255,106,106,1)",
"0.75": "rgba(255,127,127,1)",
"0.79": "rgba(255,148,148,1)",
"0.83": "rgba(255,170,170,1)",
"0.87": "rgba(255,191,191,1)",
"0.92": "rgba(255,212,212,1)",
"0.96": "rgba(255,233,233,1)",
"1.00": "rgba(255,255,255,1)"
}, {
"0": "rgba(255,255,255,0)",
"0.29": "rgba(0,0,148,1)",
"0.33": "rgba(0,0,170,1)",
"0.37": "rgba(0,0,191,1)",
"0.42": "rgba(0,0,212,1)",
"0.46": "rgba(0,0,233,1)",
"0.50": "rgba(0,0,255,1)",
"0.54": "rgba(21,21,255,1)",
"0.58": "rgba(42,42,255,1)",
"0.62": "rgba(63,63,255,1)",
"0.67": "rgba(85,85,255,1)",
"0.71": "rgba(106,106,255,1)",
"0.75": "rgba(127,127,255,1)",
"0.79": "rgba(148,148,255,1)",
"0.83": "rgba(170,170,255,1)",
"0.87": "rgba(191,191,255,1)",
"0.92": "rgba(212,212,255,1)",
"0.96": "rgba(233,233,255,1)",
"1.00": "rgba(255,255,255,1)"
}, {
"0": "rgba(255,255,255,0)",
"0.29": "rgba(0,148,148,1)",
"0.33": "rgba(0,170,170,1)",
"0.37": "rgba(0,191,191,1)",
"0.42": "rgba(0,212,212,1)",
"0.46": "rgba(0,233,233,1)",
"0.50": "rgba(0,255,255,1)",
"0.54": "rgba(21,255,255,1)",
"0.58": "rgba(42,255,255,1)",
"0.62": "rgba(63,255,255,1)",
"0.67": "rgba(85,255,255,1)",
"0.71": "rgba(106,255,255,1)",
"0.75": "rgba(127,255,255,1)",
"0.79": "rgba(148,255,255,1)",
"0.83": "rgba(170,255,255,1)",
"0.87": "rgba(191,255,255,1)",
"0.92": "rgba(212,255,255,1)",
"0.96": "rgba(233,255,255,1)",
"1.00": "rgba(255,255,255,1)"
}, {
"0": "rgba(255,255,255,0)",
"0.29": "rgba(0,148,148,1)",
"0.33": "rgba(0,170,170,1)",
"0.37": "rgba(0,191,191,1)",
"0.42": "rgba(0,212,212,1)",
"0.46": "rgba(0,233,233,1)",
"0.50": "rgba(0,255,255,1)",
"0.54": "rgba(21,255,255,1)",
"0.58": "rgba(42,255,255,1)",
"0.62": "rgba(63,255,255,1)",
"0.67": "rgba(85,255,255,1)",
"0.71": "rgba(106,255,255,1)",
"0.75": "rgba(127,255,255,1)",
"0.79": "rgba(148,255,255,1)",
"0.83": "rgba(170,255,255,1)",
"0.87": "rgba(191,255,255,1)",
"0.92": "rgba(212,255,255,1)",
"0.96": "rgba(233,255,255,1)",
"1.00": "rgba(255,255,255,1)"
}, {
"0": "rgba(255,255,255,0)",
"0.29": "rgba(0,148,148,1)",
"0.33": "rgba(0,170,170,1)",
"0.37": "rgba(0,191,191,1)",
"0.42": "rgba(0,212,212,1)",
"0.46": "rgba(0,233,233,1)",
"0.50": "rgba(0,255,255,1)",
"0.54": "rgba(21,255,255,1)",
"0.58": "rgba(42,255,255,1)",
"0.62": "rgba(63,255,255,1)",
"0.67": "rgba(85,255,255,1)",
"0.71": "rgba(106,255,255,1)",
"0.75": "rgba(127,255,255,1)",
"0.79": "rgba(148,255,255,1)",
"0.83": "rgba(170,255,255,1)",
"0.87": "rgba(191,255,255,1)",
"0.92": "rgba(212,255,255,1)",
"0.96": "rgba(233,255,255,1)",
"1.00": "rgba(255,255,255,1)"
}, {
"0": "rgba(255,255,255,0)",
"0.29": "rgba(0,148,148,1)",
"0.33": "rgba(0,170,170,1)",
"0.37": "rgba(0,191,191,1)",
"0.42": "rgba(0,212,212,1)",
"0.46": "rgba(0,233,233,1)",
"0.50": "rgba(0,255,255,1)",
"0.54": "rgba(21,255,255,1)",
"0.58": "rgba(42,255,255,1)",
"0.62": "rgba(63,255,255,1)",
"0.67": "rgba(85,255,255,1)",
"0.71": "rgba(106,255,255,1)",
"0.75": "rgba(127,255,255,1)",
"0.79": "rgba(148,255,255,1)",
"0.83": "rgba(170,255,255,1)",
"0.87": "rgba(191,255,255,1)",
"0.92": "rgba(212,255,255,1)",
"0.96": "rgba(233,255,255,1)",
"1.00": "rgba(255,255,255,1)"
}];
Array.prototype.clean = function (deleteValue) {
for (var i = 0; i < this.length; i++) {
if (this[i] == deleteValue) {
this.splice(i, 1);
i--;
}
}
return this;
};
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(39, -95),
mapTypeId: google.maps.MapTypeId.ROADMAP,
suppressInfoWindows: true
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$addLayerBtn = $('.btn.action-addLayer');
$loader.fadeOut();
}
function addLayer(xxx, yyy, zzz, aaa, bbb) {
var layerTextArray = [],
$layers = $('ul.layers'),
layerId = layers.length,
$layer = $('<li />').addClass('layer').data('layerid', layerId);
$loader.fadeIn(animation_speed);
// ... do some stuff ...
$.ajax({
url: '/API/xxx',
type: 'get',
data: {
v: new Date().getTime(),
xxx: xxx
}
}).done(function (response) { // returns JSON array of objects
$(response).each(function () {
var node = this;
dataPoints.push(new google.maps.LatLng(node.latitude, node.longitude));
});
pointArray = new google.maps.MVCArray(dataPoints);
var heatmap = new google.maps.visualization.HeatmapLayer({
opacity: 0.8,
radius: 20,
data: pointArray,
gradient: gradients[layerId],
map: map
});
layers.push(heatmap);
$loader.fadeOut(animation_speed);
});
}
$addLayerBtn.on('click', function (event) {
var $this = $(this)
//...
;
event.preventDefault();
addLayer(xxx, yyy, zzz, aaa, bbb);
});
google.maps.event.addDomListener(window, 'load', initialize);})(jQuery);