我使用rails 4.2,我尝试根据我的数据显示热图。我只能显示地图,因为热图会给我InvalidValueError: setMap: not an instance of Map
这个错误。因此热图不起作用,只能看到默认地图。
我的javascript代码如下所示
:javascript
var map;
function initialize() {
var mapOptions = {
zoom: 10,
center: {lat: latitude, lng: longitude},
mapTypeId: 'satellite'
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
};
$( document ).ready(function() {
initialize();
function initMap() {
var adrs = #{addresses.map{ |address| address[:address_set].select{ |a| a.latitude.present? && a.longitude.present? }.map{ |a| [a.latitude, a.longitude] }.uniq}};
var gradients = [
[
'rgba(255, 0, 255, 0)',
'rgba(255, 0, 255, 1)',
'rgba(225, 0, 245, 1)',
'rgba(205, 0, 235, 1)',
'rgba(185, 0, 225, 1)',
'rgba(165, 0, 215, 1)',
'rgba(145, 0, 205, 1)',
'rgba(125, 0, 195, 1)',
'rgba(105, 0, 185, 1)',
'rgba(85, 0, 175, 1)',
'rgba(65, 0, 165, 1)',
'rgba(45, 0, 155, 1)',
'rgba(25, 0, 145, 1)',
'rgba(0, 0, 135, 1)'
]
];
function getPoints(points) {
var gcs = [];
points.forEach(function(value) {
gcs.push(new google.maps.LatLng(value[0], value[1]));
});
return gcs;
};
heatmaps = [];
for(var i = 0; i < adrs.length; i++) {
heatmaps[i] = new google.maps.visualization.HeatmapLayer({
data: getPoints(adrs[i]),
gradient: gradients[i],
radius: 10,
opacity: 0.5,
maxIntensity: 8,
map: map
});
};
}
function toggleHeatmap() {
for(var i = 0; i < heatmaps.length; i++) {
heatmaps[i].setMap(map);
};
}
initMap();
$('.change').on('click',function(e){
e.preventDefault();
toggleHeatmap();
});
});
所有数据都运行良好,但仍然显示错误。我该如何解决? 提前谢谢!