Google map heat map api, неспособный заполнить heatmap

Question

Я пытаюсь создать слой heatmap, как показано ниже в примере.

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

Данные, которые приходят из URL имеют следующий шаблон:

[ 
{"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

Ваша широта и долгота перепутаны. Значения «ycoord», очевидно, являются долготами ({"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

фрагмент кода:

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

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

<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>