Question

我正在尝试创建一个图层热图，如下例所示。

https://google-developers.appspot.com/maps/documentation/javascript/examples/layer-heatmap

我的javascript代码如下所示：

var map, pointarray, heatmap;

function initialize() {
    var mapOptions = {
        zoom : 13,
        center : new google.maps.LatLng(37.774546, -122.433523),
        mapTypeId : google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);


    heatmap = new google.maps.visualization.HeatmapLayer({
        data : []
    });

    heatmap.setMap(map);

    heatmap.setMap(null);
    var jsonArray = [];
    $.ajax({
        url : "/heatmapdata",
        type : "GET",
        data : "",
        contentType : "application/json; charset=utf-8",
        dataType : "json",
        success : function(data) {
            $.each(data, function(i, jsondata) {
                var jsonObject = {};
                jsonObject.xcoord = jsondata.xcoord;
                jsonObject.ycoord = jsondata.ycoord;
                jsonArray.push(new google.maps.LatLng(jsonObject.ycoord,
                        jsonObject.xcoord));
            });
            var pointArray = new google.maps.MVCArray(jsonArray);
            heatmap.setData(pointArray);
            heatmap.setMap(map);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

来自网址的数据具有以下格式：

    [
{"ycoord":-122.445368,"xcoord":37.782551},

{"ycoord":-122.444586,"xcoord":37.782745},

{"ycoord":-122.442815,"xcoord":37.782919},

{"ycoord":-122.443688,"xcoord":37.782842}

]

我无法理解我在这里缺少的东西。控制台显示返回了jsonobject。任何帮助都将非常感激。

此致 Subhankar

Answer 1

你的纬度和经度是相反的。＆＃34; ycoord＆＃34;值显然是经度（{"ycoord":-122.445368,"xcoord":37.782551}，纬度的允许范围是+/- 90）。

$.ajax({
    url : "/heatmapdata",
    type : "GET",
    data : "",
    contentType : "application/json; charset=utf-8",
    dataType : "json",
    success : function(data) {
        $.each(data, function(i, jsondata) {
            var jsonObject = {};
            jsonObject.xcoord = jsondata.xcoord;
            jsonObject.ycoord = jsondata.ycoord;
            jsonArray.push(new google.maps.LatLng(jsonObject.xcoord,
                    jsonObject.ycoord));  // reverse entries
        });
        var pointArray = new google.maps.MVCArray(jsonArray);
        heatmap.setData(pointArray);
        heatmap.setMap(map);
    }
});

working fiddle

代码段：

＆＃13;

var map, pointarray, heatmap;

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(37.774546, -122.433523),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);


  heatmap = new google.maps.visualization.HeatmapLayer({
    data: []
  });

  heatmap.setMap(map);

  heatmap.setMap(null);
  var jsonArray = [];
  var data = [{
      "ycoord": -122.445368,
      "xcoord": 37.782551
    },

    {
      "ycoord": -122.444586,
      "xcoord": 37.782745
    },

    {
      "ycoord": -122.442815,
      "xcoord": 37.782919
    },

    {
      "ycoord": -122.443688,
      "xcoord": 37.782842
    }

  ];
  /* $.ajax({
      url : "/heatmapdata",
      type : "GET",
      data : "",
      contentType : "application/json; charset=utf-8",
      dataType : "json",
      success : function(data) { */
  $.each(data, function(i, jsondata) {
    var jsonObject = {};
    jsonObject.xcoord = jsondata.xcoord;
    jsonObject.ycoord = jsondata.ycoord;
    jsonArray.push(new google.maps.LatLng(jsonObject.xcoord, jsonObject.ycoord));
  });
  var pointArray = new google.maps.MVCArray(jsonArray);
  heatmap.setData(pointArray);
  heatmap.setMap(map);
  /*    }
   }); */
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

＆＃13;

谷歌地图热图api，无法填充热图

1 个答案: