我需要使用xml文件中的数据在Google地图中创建一个热图图层。 我的xml文件有纬度和经度，我需要将其放入数组调用taxiData []。
我已经能够通过console.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>I need to create a heatmap layer in Google map using data from an xml file. My xml file have latitude and longitude which I need to put in an array call taxiData[].
I have been able to console.log the latitudes and longitudes that i am getting from the xml.
However, if i log it outside, i loss the values. My lat and lng have been declared as global.
How do I get it in the array taxiData so that i can use it when initializing the map?
My code is as follows
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没有taxiData 。 函数initialize()在回调完成之前启动，收集数据。 一种可能的解决方案是注释掉google.maps.event.addDomListener(window, 'load', initialize); for loop后for loop在回调函数结束时调用函数initialize() 。
You can define taxiData as a global array
var map, pointarray, heatmap; var lat, lng; var taxiData = [];And then set it in function 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); } });And delete static array.
Update: Because downloadUrl() call is asynchronous, taxiData is not available in function initialize. Function initialize() is started before callback finishes with collecting data. One possible solution is to comment out google.maps.event.addDomListener(window, 'load', initialize); and call function initialize() at the end of callback function after for loop.
更多推荐
发布评论