0

我想我的 javascript 代码受到我想要解决的提升效果的影响。

我正在通过 SOAP 获取要在热图上可视化的数据，这些数据存储在“ajax”代码块内的全局变量 heatMapData 中，然后应将它们分配给 google.maps.visualization.HeatmapLayer 构造函数。不幸的是，当这个构造函数被调用时，变量 heatMapData 是空的，尽管它已经用指令 heatMapData.push({location: new google ...) 正确初始化，我用 firebug 检查了它。. 这可能是因为这个变量被提升了。从 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>
  	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<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);
    	 
    	  
</script>
<p id="demo"></p>
  </body>
</html>

4

1 回答 1

2

您遇到的问题与吊装无关，而与时间有关。

该$.ajax调用启动从服务器加载数据的过程，但您的代码在该请求未完成时继续运行。这就是为什么ajax有一个回调——所以当它返回时你可以对数据采取行动，因为它不会马上可用。

所以在成功回调完成后你不能使用你的heatMapData直到。ajax将您想要使用它的代码移动到您从该回调调用的函数中。

于 2014-11-27T17:29:51.547 回答