1

私が持っているいくつかのデータに基づいて、Google Maps API でヒートマップ レイヤーを作成しようとしています。これは、Google Maps API v3 ドキュメントに基づいています。

https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps

問題は、新しいデータを追加する必要がある場合、それをコード自体に記述しなければならないことです。緯度、経度、重さ。別の目的で、PHP から JavaScript に XML 出力をインポートすることができました。これは、ヒートマップ レイヤーでも実行できると思います。ただし、私のコードは完全に機能していません。レイヤーは表示されず、マップのみが表示されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Heatmap Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?
v=3.exp&sensor=false&libraries=visualization"></script>
<script>
// var map, pointarray, heatmap;
var heatMapData = [];

function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(23.2500, 87.8500),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
     };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);


 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(hObj); //push object onto array  

 }
 });

    //pointArray = new google.maps.MVCArray(heatMapData);

    var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatMapData,
    dissipating: true,
    radius: 150,
    maxIntensity: 200
    });

    heatmap.setMap(map);
  }

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);
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 600px; width: 800px;"></div>
</body>
</html>

XMP を PHP から JavaScript にインポートするために Google のリファレンスを使用しました。

誰か助けてくれませんか？

前もって感謝します...

4

0 に答える 0