0
내 자바 스크립트 코드는 내가 분류하고 싶은 권양 효과가 있다고 가정합니다.자바 호이스트를 극복하기위한 조언
히트 맵에서 시각화하고자하는 SOAP를 통해 데이터를 가져오고 있습니다.이 데이터는 "ajax"코드 블록 내의 전역 변수 heatMapData에 저장되며 google.maps.visualization에 으로 지정되어야합니다. HeatmapLayer 생성자. 불행히도 heatMapData 변수가 호출되면 heatMapData.push ({location : new google ...) 명령으로 올바르게 초기화되었지만 변수는 비어 있습니다. 방화 광구를 사용하여이를 검사했습니다. . 이 변수가 올리기 때문에 발생할 수 있습니다. ajax 코드를 반환 한 후 heatMapData에 값을 유지하려면 어떻게해야합니까? 미리 감사드립니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Energy Heatmap </title>
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 80% }
h1 { position:absolute; }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true?key=AIzaSyCzoFE1ddY9Ofv0jjOvA3yYdgzV4JvCNl4"></script>
\t <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
\t <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<h1>Energy Heatmap </h1>
<div id="map-canvas"></div>
<script>
var heatMapData = new Array();
function loadHeatMapData()
{
$.ajax
({
type: "GET",
url: "http://localhost:8080/EnergyManagement-portlet/api/secure/jsonws/sample/get-samples-time-by-name?energyName=EnAssTCU",
dataType: "jsonp",
crossDomain: true,
cache: false,
success: function(jsonData)
{
for (var i = 0; i < jsonData.length; i++)
{
var decodedData = JSON.parse(jsonData[i]);
var lng = decodedData["_longitude"];
var lat = decodedData["_latitude"];
var energyIntensity = decodedData["_value"];
//Here I add values to heatMapData
heatMapData.push({location: new google.maps.LatLng(lat, lng), weight: energyIntensity});
}
}
})
}
// map center
var myLatlng = new google.maps.LatLng(40.8333333, 14.25);
// map options,
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// standard map
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
loadHeatMapData();
var heatMap = new google.maps.visualization.HeatmapLayer({
data: heatMapData //heatMapData is empty
});
heatMap.setMap(map);
var vehiclePath = [
new google.maps.LatLng(40.85235, 14.26813),
new google.maps.LatLng(40.85236, 14.26822),
new google.maps.LatLng(40.85236, 14.26822),
new google.maps.LatLng(40.85236, 14.26816),
new google.maps.LatLng(40.85258, 14.26811),
new google.maps.LatLng(40.85364, 14.26793),
new google.maps.LatLng(40.85414, 14.26778),
new google.maps.LatLng(40.8554, 14.2676),
new google.maps.LatLng(40.8579, 14.27286),
new google.maps.LatLng(40.85821, 14.27291),
new google.maps.LatLng(40.8584, 14.27302),
new google.maps.LatLng(40.85859, 14.27325),
new google.maps.LatLng(40.8587, 14.27421),
new google.maps.LatLng(40.85865, 14.27433),
new google.maps.LatLng(40.85866, 14.27446),
new google.maps.LatLng(40.86656, 14.291),
new google.maps.LatLng(40.86653, 14.29102)
];
var path = new google.maps.Polyline({
path: vehiclePath,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
path.setMap(map);
\t
\t
</script>
<p id="demo"></p>
</body>
</html>