如何将XML数据导入Javascript以用作热图层的数据？_Javascript_Xml_Google Maps Api 3

如何将XML数据导入Javascript以用作热图层的数据？

javascript xml google-maps-api-3

如何将XML数据导入Javascript以用作热图层的数据？,javascript,xml,google-maps-api-3,Javascript,Xml,Google Maps Api 3,我正在尝试使用GoogleMapsAPI在GoogleMaps上添加一个热图层，并成功地编制了Google开发者提供的默认文档。但是，我想通过从MySQL使用PHP生成的XML数据添加“位置”和“权重”。但是我得到的HTML输出只是谷歌地图图像，热图层不会出现。谷歌地图JavaScript API v3示例：热图层 html{高度：100%} 正文{高度：100%；边距：0；填充：0} 地图画布{高度：100%；} src=链路 var heatMapData=[];//empty arr

我正在尝试使用GoogleMapsAPI在GoogleMaps上添加一个热图层，并成功地编制了Google开发者提供的默认文档。但是，我想通过从MySQL使用PHP生成的XML数据添加“位置”和“权重”。但是我得到的HTML输出只是谷歌地图图像，热图层不会出现。谷歌地图JavaScript API v3示例：热图层 html{高度：100%} 正文{高度：100%；边距：0；填充：0} 地图画布{高度：100%；} src=链路

 var heatMapData=[];//empty array to store objects
 var heatmap;
 var pointArray;

    function initialize() {
    var mapOptions = {
      zoom: 2,
      center: new google.maps.LatLng(22.5697, 88.3697),
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

         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("phpsqlajax_genxml_heatmap.php", function(data) {
       var xml = data.responseXML;
       var markers = xml.documentElement.getElementsByTagName("marker");
 for (var i = 0; i<markers.length; i++) { //loop through nodes getting info
    var point = new google.maps.LatLng(
    parseFloat(markers[i].getAttribute("lat")),
    parseFloat(markers[i].getAttribute("lng")));
    var intensity = markers[i].getAttribute("intensity");
    var hObj =  { //create object
    location: point,
    weight : intensity
    };

 heatMapData.push(point); //push object onto array

          } 
 });
   pointArray = new google.maps.MVCArray(heatMapData); //convert array to MVC array
   heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatMapData
    }); //create heat map object

    heatmap.setMap(map); //display heat map on map
}
function toggleHeatmap() {
    heatmap.setMap(heatmap.getMap() ? null : 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.setOptions({
      gradient: heatmap.get('gradient') ? null : gradient
    });
  }

  function changeRadius() {
    heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
  }

  function changeOpacity() {
    heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
  }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 600px; width: 800px;">
</div>
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</body>
</html>