我需要使用xml文件中的数据在Google地图中创建一个热图层。我的xml文件有纬度和经度，我需要把它们放在一个名为taxiData[]的数组中。
我已经能够安慰.log我从xml中获得的纬度和经度。
但是，如果我把它记录在外部，我就会丢失这些值。我的lat和lng已被宣布为全球性。
如何在数组taxiData中获取它，以便在初始化映射时使用它？
我的代码如下
var map, pointarray, heatmap;
var lat, lng;
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
downloadUrl("locations_xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
lat = parseFloat(markers[i].getAttribute("lat"));
lng = parseFloat(markers[i].getAttribute("lng"));
console.log(lat, lng);
}
});
// console.log(lat, lng); --> does not work
//I want to add the above lat and lng to this array below instead of the static values;
var taxiData = [
new google.maps.LatLng(-20.037720, 57.602348),
new google.maps.LatLng(-20.044815, 57.570076),
new google.maps.LatLng(-20.047396, 57.632561),
new google.maps.LatLng(-20.055780, 57.600288),
new google.maps.LatLng(-20.310350, 57.436180),
new google.maps.LatLng(-20.339325, 57.478752)
];
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-20.037720, 57.602348),
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var pointArray = new google.maps.MVCArray(taxiData);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
您可以将taxiData定义为全局数组
var map, pointarray, heatmap;
var lat, lng;
var taxiData = [];
然后在函数downloadUrl():中设置
downloadUrl("locations_xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
lat = parseFloat(markers[i].getAttribute("lat"));
lng = parseFloat(markers[i].getAttribute("lng"));
taxiData.push(new google.maps.LatLng(lat, lng));
console.log(lat, lng);
}
});
并删除静态数组。
更新：因为downloadUrl()调用是异步的，所以taxiData在函数initialize中不可用。函数initialize()在回调完成数据收集之前启动。一种可能的解决方案是注释掉google.maps.event.addDomListener(window, 'load', initialize);，并在for loop之后的回调函数末尾调用函数initialize()。