Question

我正在尝试使用Google Maps API在Google地图上添加热图图层，并成功制定了Google开发人员提供的默认文档。但是，我想添加＆＃39;位置＆＃39;和'重量'＃39;通过PHP从PHP生成的XML数据。但我只使用谷歌地图图像获得HTML输出，热图图层不会出现。 Google Maps JavaScript API v3示例：热图图层 html {height：100％} 身体{身高：100％;保证金：0;填充：0} #map_canvas {height：100％;} SRC =＆＃34;连结＆＃34;

 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>

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

0 个答案: