Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 谷歌地图热图api,无法填充热图_Javascript_Google Maps - Fatal编程技术网

Javascript 谷歌地图热图api,无法填充热图

Javascript 谷歌地图热图api,无法填充热图,javascript,google-maps,Javascript,Google Maps,我正在尝试创建一个层热图,如下面的示例所示 我的javascript代码如下所示: var map, pointarray, heatmap; function initialize() { var mapOptions = { zoom : 13, center : new google.maps.LatLng(37.774546, -122.433523), mapTypeId : google.maps.MapTypeId.SAT

我正在尝试创建一个层热图,如下面的示例所示

我的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。任何帮助都将不胜感激

问候,,
你的纬度和经度是相反的。“ycoord”值显然是经度(
{“ycoord”:-122.445368,“xcoord”:37.782551}
,允许的纬度范围为+/-90)

代码段:

var图、点阵列、热图;
函数初始化(){
变量映射选项={
缩放:13,
中心:新google.maps.LatLng(37.774546,-122.433523),
mapTypeId:google.maps.mapTypeId.SATELLITE
};
map=new google.maps.map(document.getElementById('map-canvas'),
地图选项);
heatmap=新建google.maps.visualization.HeatmapLayer({
数据:[]
});
热图.设置图(map);
heatmap.setMap(空);
var jsonArray=[];
风险值数据=[{
“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”,
键入:“获取”,
数据:“,
contentType:“应用程序/json;字符集=utf-8”,
数据类型:“json”,
成功:函数(数据){*/
$.each(数据、函数(i、jsondata){
var jsonObject={};
jsonObject.xcoord=jsondata.xcoord;
jsonObject.ycoord=jsondata.ycoord;
push(新的google.maps.LatLng(jsonObject.xcoord,jsonObject.ycoord));
});
var pointArray=new google.maps.MVCArray(jsonArray);
heatmap.setData(点阵列);
热图.设置图(map);
/*    }
}); */
}
google.maps.event.addDomListener(窗口“加载”,初始化)
html,
身体,
#地图画布{
身高:100%;
宽度:100%;
边际:0px;
填充:0px
}

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