2

我有以下使用 for 循环生成的数组。

{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450},  
{x:520, y:620, count:460}, 
{x:540, y:640, count:470}, 
{x:560, y:660, count:480}, 
{x:580, y:680, count:30}

我正在使用它来使用来自以下网址的插件创建热图：http: //www.patrick-wied.at/static/heatmapjs/examples.html

我需要将上述数组作为javascript 对象以下列格式传递给 heatmap.js 文件。我怎样才能做到这一点？如何将我的数组转换为 JavaScript 对象？

data: {
[
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450} 
]

};

我称这个功能

 setDataSet: function(obj, internal)
4

2 回答 2

1 
data: {
[
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450} 
]};

无效。您缺少数组的键：

{data: {points:[
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450} 
]}};

你可以这样做：

var points = [
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450},  
{x:520, y:620, count:460}, 
{x:540, y:640, count:470}, 
{x:560, y:660, count:480}, 
{x:580, y:680, count:30} 
];

var data = {'points':points};

或者

var data = {'data':{'points':points}};

如果您需要data在内部获取正确的数据对象。

于 2013-02-06T10:40:01.800 回答
0

A/我相信您正在使用插件在谷歌地图上显示热图，因此您的数组应该包含纬度/经度值而不是纯数字。

B/如果它是一个数组，它被定义为：

var arr = [ {x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450},  
{x:520, y:620, count:460}, 
{x:540, y:640, count:470}, 
{x:560, y:660, count:480}, 
{x:580, y:680, count:30} ];

节点 [ & ] 表示一个数组。每个 {} 元素都是数组中的一个对象！

C/传递给热图的数据应该是这样的：

var heatMapData ={
    max: 480,
    data: arr
};

其中 arr 在其所有元素中的最高计数为 480（该坐标处的出现次数）（来自热图的源代码：最大出现次数 - 热图径向渐变 alpha 过渡基于它）

工作示例代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Demo heatmap</title>
        <meta name="description" content="DEmo heatmap" />
        <meta name="author" content="noyb" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/site.css" type="text/css" media="screen" charset="utf-8" />
        <style>

        </style>
        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
        <script src="http//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            window.jQuery || document.write('<script src="jquery-1.6.2.min.js"><\/script>')
        </script>

        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="heatmap.js"></script>
        <script type="text/javascript" src="heatmap-gmaps.js"></script>
        <style>
            #heatmapArea{
                width: 800px;
                height: 600px;
                margin: 10px auto;
            }
        </style>

    </head>
    <body>
        <div id="heatmapArea"> map </div>

        <script>
            $(document).ready(function() {
                // standard gmaps initialization
                var myLatlng = new google.maps.LatLng(48.3333, 16.35);
                // define map properties
                var myOptions = {
                    zoom: 3,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: false,
                    scrollwheel: true,
                    draggable: true,
                    navigationControl: true,
                    mapTypeControl: false,
                    scaleControl: true,
                    disableDoubleClickZoom: false
                };
                // we'll use the heatmapArea
                var map = new google.maps.Map($("#heatmapArea")[0], myOptions);

                // let's create a heatmap-overlay
                // with heatmap config properties
                var heatmap = new HeatmapOverlay(map, {
                    "radius": 20,
                    "visible": true,
                    "opacity": 70
                });

                // here is our dataset
                var dat = [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1},{lat: 38, lng:-97, count: 2},{lat: 54, lng:-2, count: 1},{lat: 51.5167, lng:-0.7, count: 2},{lat: 51.5167, lng:-0.7, count: 6},{lat: 60.3911, lng:5.3247, count: 1},{lat: 50.8333, lng:12.9167, count: 9},{lat: 50.8333, lng:12.9167, count: 1},{lat: 52.0833, lng:4.3, count: 3},{lat: 52.0833, lng:4.3, count: 1},{lat: 51.8, lng:4.4667, count: 16},{lat: 51.8, lng:4.4667, count: 9},{lat: 51.8, lng:4.4667, count: 2},{lat: 51.1, lng:6.95, count: 1},{lat: 13.75, lng:100.517, count: 1},{lat: 18.975, lng:72.8258, count: 1},{lat: 2.5, lng:112.5, count: 2},{lat: 25.0389, lng:102.718, count: 1},{lat: -27.6167, lng:152.733, count: 1},{lat: -33.7667, lng:150.833, count: 1},{lat: -33.8833, lng:151.217, count: 2},{lat: 9.4333, lng:99.9667, count: 1},{lat: 33.7, lng:73.1667, count: 1},{lat: 33.7, lng:73.1667, count: 2},{lat: 22.3333, lng:114.2, count: 1},{lat: 37.4382, lng:-84.051, count: 1},{lat: 34.6667, lng:135.5, count: 1},{lat: 37.9167, lng:139.05, count: 1},{lat: 36.3214, lng:127.42, count: 1},{lat: -33.8, lng:151.283, count: 2},{lat: -33.8667, lng:151.225, count: 1},{lat: -37.65, lng:144.933, count: 2},{lat: -37.7333, lng:145.267, count: 1},{lat: -34.95, lng:138.6, count: 1},{lat: -27.5, lng:153.017, count: 1},{lat: -27.5833, lng:152.867, count: 3},{lat: -35.2833, lng:138.55, count: 1},{lat: 13.4443, lng:144.786, count: 2},{lat: -37.8833, lng:145.167, count: 1},{lat: -37.86, lng:144.972, count: 1},{lat: -27.5, lng:153.05, count: 1},{lat: 35.685, lng:139.751, count: 2},{lat: -34.4333, lng:150.883, count: 2},{lat: 14.0167, lng:100.733, count: 2},{lat: 13.75, lng:100.517, count: 5},{lat: -31.9333, lng:115.833, count: 1},{lat: -33.8167, lng:151.167, count: 1},{lat: -37.9667, lng:145.117, count: 1},{lat: -37.8333, lng:145.033, count: 1},{lat: -37.6417, lng:176.186, count: 2},{lat: -37.6861, lng:176.167, count: 1},{lat: -41.2167, lng:174.917, count: 1},{lat: 39.0521, lng:-77.015, count: 3},{lat: 24.8667, lng:67.05, count: 1},{lat: 24.9869, lng:121.306, count: 1},{lat: 53.2, lng:-105.75, count: 4},{lat: 44.65, lng:-63.6, count: 1},{lat: 53.9667, lng:-1.0833, count: 1},{lat: 40.7, lng:14.9833, count: 1},{lat: 37.5331, lng:-122.247, count: 1},{lat: 39.6597, lng:-86.8663, count: 2},{lat: 33.0247, lng:-83.2296, count: 1},{lat: 34.2038, lng:-80.9955, count: 1},{lat: 28.0087, lng:-82.7454, count: 1},{lat: 44.6741, lng:-93.4103, count: 1},{lat: 31.4507, lng:-97.1909, count: 1},{lat: 45.61, lng:-73.84, count: 1},{lat: 49.25, lng:-122.95, count: 1},{lat: 49.9, lng:-119.483, count: 2},{lat: 32.7825, lng:-96.8207, count: 6},{lat: 32.7825, lng:-96.8207, count: 7},{lat: 32.7825, lng:-96.8207, count: 4},{lat: 32.7825, lng:-96.8207, count: 41},{lat: 32.7825, lng:-96.8207, count: 11},{lat: 32.7825, lng:-96.8207, count: 3},{lat: 32.7825, lng:-96.8207, count: 10},{lat: 32.7825, lng:-96.8207, count: 5},{lat: 32.7825, lng:-96.8207, count: 14},{lat: 41.4201, lng:-75.6485, count: 4},{lat: 31.1999, lng:-92.3508, count: 1},{lat: 41.9874, lng:-91.6838, count: 1},{lat: 30.1955, lng:-85.6377, count: 1},{lat: 42.4266, lng:-92.358, count: 1},{lat: 41.6559, lng:-91.5228, count: 1},{lat: 33.9269, lng:-117.861, count: 3},{lat: 41.8825, lng:-87.6441, count: 6},{lat: 42.3998, lng:-88.8271, count: 1},{lat: 33.1464, lng:-97.0902, count: 1},{lat: 47.2432, lng:-93.5119, count: 1},{lat: 41.6472, lng:-93.46, count: 1},{lat: 36.1213, lng:-76.6414, count: 1},{lat: 41.649, lng:-93.6275, count: 1},{lat: 44.8547, lng:-93.7854, count: 1},{lat: 43.6833, lng:-79.7667, count: 1},{lat: 40.6955, lng:-89.4293, count: 1},{lat: 37.6211, lng:-77.6515, count: 1},{lat: 37.6273, lng:-77.5437, count: 3},{lat: 33.9457, lng:-118.039, count: 1},{lat: 33.8408, lng:-118.079, count: 1},{lat: 40.3933, lng:-74.7855, count: 1},{lat: 40.9233, lng:-73.9984, count: 1},{lat: 39.0735, lng:-76.5654, count: 1},{lat: 40.5966, lng:-74.0775, count: 1},{lat: 40.2944, lng:-73.9932, count: 2},{lat: 38.9827, lng:-77.004, count: 1},{lat: 38.3633, lng:-81.8089, count: 1},{lat: 36.0755, lng:-79.0741, count: 1},{lat: 51.0833, lng:-114.083, count: 2},{lat: 49.1364, lng:-122.821, count: 1},{lat: 39.425, lng:-84.4982, count: 3},{lat: 38.7915, lng:-82.9217, count: 1},{lat: 39.0131, lng:-84.2049, count: 1},{lat: 29.7523, lng:-95.367, count: 7},{lat: 29.7523, lng:-95.367, count: 4},{lat: 41.5171, lng:-71.2789, count: 1},{lat: 29.7523, lng:-95.367, count: 2},{lat: 32.8148, lng:-96.8705, count: 1},{lat: 45.5, lng:-73.5833, count: 1},{lat: 40.7529, lng:-73.9761, count: 6},{lat: 33.6534, lng:-112.246, count: 1},{lat: 40.7421, lng:-74.0018, count: 1},{lat: 38.3928, lng:-121.368, count: 1},{lat: 32.7825, lng:-96.8207, count: 1},{lat: 39.7968, lng:-76.993, count: 2},{lat: 40.5607, lng:-111.724, count: 1},{lat: 41.2863, lng:-75.8953, count: 1},{lat: 26.3484, lng:-80.2187, count: 1},{lat: 32.711, lng:-117.053, count: 2},{lat: 32.5814, lng:-83.6286, count: 3},{lat: 35.0508, lng:-80.8186, count: 3},{lat: 35.0508, lng:-80.8186, count: 1},{lat: -22.2667, lng:166.45, count: 5},{lat: 50.1167, lng:8.6833, count: 1},{lat: 51.9167, lng:4.5, count: 2},{lat: 54, lng:-2, count: 6},{lat: 52.25, lng:21, count: 1},{lat: 49.1, lng:10.75, count: 3},{lat: 51.65, lng:6.1833, count: 1},{lat: 1.3667, lng:103.8, count: 1},{lat: 29.4889, lng:-98.3987, count: 11},{lat: 29.3884, lng:-98.5311, count: 1},{lat: 41.8825, lng:-87.6441, count: 2},{lat: 41.8825, lng:-87.6441, count: 1},{lat: 33.9203, lng:-84.618, count: 4},{lat: 40.1242, lng:-82.3828, count: 1},{lat: 40.1241, lng:-82.3828, count: 1},{lat: 43.0434, lng:-87.8945, count: 1},{lat: 43.7371, lng:-74.3419, count: 1},{lat: 42.3626, lng:-71.0843, count: 1},{lat: 4.6, lng:-74.0833, count: 1},{lat: 19.7, lng:-101.117, count: 1},{lat: 25.6667, lng:-100.317, count: 1},{lat: 53.8167, lng:10.3833, count: 1},{lat: 50.8667, lng:6.8667, count: 3},{lat: 55.7167, lng:12.45, count: 2},{lat: 44.4333, lng:26.1, count: 4},{lat: 50.1167, lng:8.6833, count: 2},{lat: 52.5, lng:5.75, count: 4},{lat: 48.8833, lng:8.7, count: 1},{lat: 17.05, lng:-96.7167, count: 3},{lat: 23, lng:-102, count: 1},{lat: 20.6167, lng:-105.25, count: 1},{lat: 23, lng:-102, count: 2},{lat: 20.6667, lng:-103.333, count: 1},{lat: 21.1167, lng:-101.667, count: 1},{lat: 17.9833, lng:-92.9167, count: 1},{lat: 20.9667, lng:-89.6167, count: 2},{lat: 21.1667, lng:-86.8333, count: 1},{lat: 17.9833, lng:-94.5167, count: 1},{lat: 18.6, lng:-98.85, count: 1},{lat: 16.75, lng:-93.1167, count: 1},{lat: 19.4342, lng:-99.1386, count: 1},{lat: -10, lng:-55, count: 1},{lat: -22.9, lng:-43.2333, count: 1},{lat: 15.7833, lng:-86.8, count: 1},{lat: 10.4667, lng:-64.1667, count: 1},{lat: 7.1297, lng:-73.1258, count: 1},{lat: 4, lng:-72, count: 2},{lat: 4, lng:-72, count: 1},{lat: 6.8, lng:-58.1667, count: 1},{lat: 0, lng:0, count: 1},{lat: 48.15, lng:11.5833, count: 2},{lat: 45.8, lng:16, count: 15},{lat: 59.9167, lng:10.75, count: 1},{lat: 51.5002, lng:-0.1262, count: 1},{lat: 55, lng:73.4, count: 1},{lat: 52.5, lng:5.75, count: 1},{lat: 52.2, lng:0.1167, count: 1},{lat: 48.8833, lng:8.3333, count: 1},{lat: -33.9167, lng:18.4167, count: 1},{lat: 40.9157, lng:-81.133, count: 2},{lat: 43.8667, lng:-79.4333, count: 1},{lat: 54, lng:-2, count: 2},{lat: 39, lng:22, count: 1},{lat: 54, lng:-2, count: 11},{lat: 54, lng:-2, count: 4},{lat: 54, lng:-2, count: 3},{lat: 9.0833, lng:-79.3833, count: 2},{lat: 21.5, lng:-104.9, count: 1},{lat: 19.5333, lng:-96.9167, count: 1},{lat: 32.5333, lng:-117.017, count: 1},{lat: 19.4342, lng:-99.1386, count: 3},{lat: 18.15, lng:-94.4167, count: 1},{lat: 20.7167, lng:-103.4, count: 1},{lat: 23.2167, lng:-106.417, count: 2},{lat: 10.9639, lng:-74.7964, count: 1},{lat: 24.8667, lng:67.05, count: 2},{lat: 1.2931, lng:103.856, count: 1},{lat: -41, lng:174, count: 1},{lat: 13.75, lng:100.517, count: 2},{lat: 13.75, lng:100.517, count: 46}];
                // important: a datapoint now contains lat, lng and count property!
                var testData={
                        max: 46,
                        data: dat
                };

                // now we can set the data
                google.maps.event.addListenerOnce(map, "idle", function(){
                    // this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
                    heatmap.setDataSet(testData);
                });
            });
        </script>
    </body>
</html>
于 2013-02-06T13:08:56.717 回答