Как загрузить данные о динамических местоположениях в тепловую карту Google в angular.js
Я работаю над живым проектом, который разработан на Angular.js и MongoDB. Теперь я внедряю статическую тепловую карту Google Heatmap в свое HTML-представление, и она отображается правильно.
Теперь я создал один API для получения сведений о местоположении пользователей из моей таблицы mongo. Я использовал вызов ajax для вызова своего URL-адреса API, и он возвращает данные о местоположении пользователей. На данном этапе все работает без сбоев.
Давайте сначала попробуем поделиться моим кодом:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Google Heatmap</title>
</head>
<body>
<div id = "map"></div>
</body>
</html>
JavaScript
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)
];
}
Если вы заметили, что я вызываю функцию getYelloPoints() в ajax, чтобы передать данные ответа. Я дважды проверил, что получаю все данные в функции 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?
Спасибо.
Я реализовал тепловую карту в angular.js и нашел решение.
Нет, это не так. В ваших кодах нет директивы ng-app. Вы также используете jQuery -> $.ajax. Это не AngularJS.
Я не делюсь, потому что код очень скучный, поэтому объяснил только основные вещи.
Хорошо, извините. Я не могу вам помочь, так как это не AngularJS. Не ждите, что мы перепишем ваш код и перенесем его как приложение AngularJS.
@lin Нет проблем.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Почему здесь отмечен AngularJS? Это не приложение AngularJS.