我正在研究在Angular.js＆amp ;; MongoDB的。现在我正在将Google Heatmap静态热图实现到我的HTML视图中，并且它正常显示。
现在我已经创建了一个API来从我的mongo表中获取用户位置详细信息。我使用ajax调用来调用我的API URL并返回用户位置数据。在这个阶段，一切都很顺利。
让我们先尝试分享我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Heatmap</title>
</head>
<body>
<div id="map"></div>
</body>
</html>
var map, yellowHeatmap, redHeatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.775, lng: -122.434},
mapTypeId: 'satellite'
});
yellowHeatmap = new google.maps.visualization.HeatmapLayer({
data: getYelloPoints(),
map: map
});
redHeatmap = new google.maps.visualization.HeatmapLayer({
data: getRedPoints(),
map: map
});
var yellowGradient = [
'rgba(255, 255, 0, 0)',
'rgba(255, 255, 0, 1)'
]
yellowHeatmap.set('gradient', yellowHeatmap.get('gradient') ? null : yellowGradient);
var redGradient = [
'rgba(255, 0, 0, 0)',
'rgba(255, 0, 0, 1)'
]
redHeatmap.set('gradient', redHeatmap.get('gradient') ? null : redGradient);
}
$.ajax({
url: '/api/user/getCountryMerchantYellowHeat',
type: 'GET',
processData: false,
contentType: false,
success: function(data) {
var length = data.data.length;
getYelloPoints(data.data, length);
}
});
function getYelloPoints(data, length) {
var markers = [];
for (var i = 0; i < length; i++) {
var location = new google.maps.LatLng(data[i].address[0].lat, data[i].address[0].long);
markers.push(location);
}
}
function getRedPoints() {
return [
new google.maps.LatLng(37.798719, -122.429092),
new google.maps.LatLng(37.798944, -122.429145)
];
}
如果您注意到我在ajax成功中调用getYelloPoints()函数来传递响应数据。我已经仔细检查过我在getYelloPoints()函数中获取了所有数据。现在的问题是，当我尝试循环时，数据位置没有显示在热图中，在这个阶段，我不知道如何解决地图问题。
如果使用此循环并在同一位置传递静态位置10次，那么地图正在工作，但如果循环从API获取的数据是错误的。
// THIS IS WORKING PERFECT WITH STATIC LOOP AND STATIC LOCATION
var markers = [];
for( var i = 1; i <= 10; i++) {
var location = new google.maps.LatLng(37.769544, -122.506104);
markers.push(location);
}
return markers;
你知道在angular.js中加载热图吗？
感谢。