Javascript 用实时数据更新热图

我正在使用WebSocket将数据从服务器发送到客户端。这很好，例如，我可以在收到服务器发送给客户端的消息时显示这些消息。 我能把它转换成经度和纬度

因此，当从服务器接收数据时，它应该在我的html中绘制到地图上，但它似乎根本没有绘制任何东西

我对javascript一无所知，所以我不确定我的代码是否正确。理想情况下，我想做的是在收到数据后，将其直接绘制到地图上，从而生成热图。这是代码的javascript方面：

<script>
    $(document).ready(function() {
        var ws = new WebSocket("ws://" + "localhost" + ":" + "8888" + "/ws");
        var London = new google.maps.LatLng(51.507335, -0.127683);

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: London,
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var pointArray = new google.map.MVCArray([]);           
    ws.onmessage = function(evt){  
            //$("#display").append(evt.data + "<br />");

            var msg = JSON.parse(evt.data);
            var coordinates = msg.coordinates.coordinates;
            var latLng = new google.maps.LatLng(coordinates[1], coordinates[0]);
            console.log('received');
            pointArray.push(latLng);
            var heatmap = new google.maps.visualization.HeatmapLayer({
                data: pointArray
            });
            heatmap.setMap(map);

            //$("#display").append(latLng + "<br />");

            //console.log(evt.data);

    };

    ws.onclose = function(evt) {alert("Server connection terminated");};
   });      
    $("#open").click(function(evt){
    evt.preventDefault();
    $.post("/", $("#eventForm").serialize());   

});

</script>

$（文档）.ready（函数（）{
var ws=new-WebSocket（“ws://“+”localhost“+”：“+”8888“+”/ws”）；
var London=new google.maps.LatLng（51.507335，-0.127683）；
var map=new google.maps.map（document.getElementById（'map_canvas'）{
中心：伦敦，
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var pointArray=new google.map.MVCArray（[]）；
ws.onmessage=函数（evt）{
//$（“#显示”）.append（evt.data+”
）；
var msg=JSON.parse（evt.data）；
var坐标=msg.coordinates.coordinates；
var latLng=new google.maps.latLng（坐标[1]，坐标[0]）；
console.log（'received'）；
点阵列推送（latLng）；
var heatmap=new google.maps.visualization.HeatmapLayer({
数据：点阵列
});
热图.设置图（map）；
//$（“#显示”）.append（latLng+”
）；
//控制台日志（evt.data）；
};
ws.onclose=function（evt）{alert（“服务器连接终止”）；}；
});      
$（“#打开”）。单击（函数（evt）{
evt.preventDefault（）；
$.post（“/”，$（“#eventForm”）.serialize（）；
});

是否有一种方法可以在接收数据时将其存储到一个数组中，但我不确定如何使用数组中的元素更新映射，因为它已被接收。

---

谢谢

我不能肯定这是否是唯一的问题，但您似乎有一个范围问题-

ws.onmessage = function (evt) {
    var msg = JSON.parse(evt.data);
    var coordinates = msg.coordinates.coordinates;
    var latLng = new google.maps.LatLng(coordinates[1], coordinates[0]);
};
...
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: latLng
});

javascript中作用域的工作方式是，latLng仅对其声明的函数中的代码可用。解决这个问题的一个简单方法是在他们共享的范围内声明-

var latLng;
ws.onmessage = function (evt) {
    var msg = JSON.parse(evt.data);
    var coordinates = msg.coordinates.coordinates;
    latLng = new google.maps.LatLng(coordinates[1], coordinates[0]);
};
...
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: latLng
});

这将使代码的其他部分在单击功能中可以访问latLng

其他一些可能的问题：

如果您想逐步向地图添加数据，那么您的结构通常会有点偏离。你想做的是在网页内创建一个地图，然后不断地向其中添加数据-没有必要每次都创建一个新地图。您可能应该做的是在ready函数中创建映射，而不是单击

此外，谷歌地图中只有一个热图层；如果您为接收到的每一位数据创建新的热图，那么您将覆盖您在以前的热图中输入的所有内容。鉴于您最近的编辑，看起来您已经得出了相同的结论

我也不太确定您的websocket代码是否达到了应有的水平。websocket“onmessage”函数不会立即返回结果：相反，它提供了有关如何处理将来任何时候传入的任何数据的说明。因此，如果希望在每次收到数据时更新地图，则无需在单击事件中使用WebSocket进行任何操作

这将导致代码结构松散，如下所示-

$(document).ready(function () {
    var ws = new WebSocket("ws://" + "localhost" + ":" + "8888" + "/ws");
    var London = new google.maps.LatLng(51.507335, -0.127683);

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: London,
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var pointArray = new google.map.MVCArray([]);
    ws.onmessage = function (evt) {
        var msg = JSON.parse(evt.data);
        var coordinates = msg.coordinates.coordinates;
        pointArray.push(new google.maps.LatLng(coordinates[1], coordinates[0]));
        var heatmap = new google.maps.visualization.HeatmapLayer({
            data: pointArray
        });
        heatmap.setMap(map);
    };

    $("#open").click(function (evt) {
        // whatever code you want click to do
    });
});

---

我无法测试这些代码，因为我没有您特定的websocket设置，但希望这能为您提供更好的基础

请详细说明你面临的具体问题。附加有关问题的更多相关信息，例如来自控制台的错误消息。stackoverflow不是调试服务。web控制台上没有错误消息。具体的问题是，我接收到的坐标数据没有在javascript代码中绘制到地图上。为什么每次单击都要设置一个新的Websocket连接？@ManseUK…我试图实现的是，一旦Websocket连接完成，所有接收到的数据都会绘制到图表上。我不是有意为每次点击创建一个新的websocket。是的……我注意到了这一点，但它仍然无法纠正在地图上绘制点的问题。我已经更新了我的答案，以包含更多关于代码中可能存在的bug和修复的详细信息，希望这足够让你工作了。谢谢你的回复……你也能很清楚地解释我的想法。我用过你的钱，但现在的问题是客户没有收到任何东西。web控制台错误显示“[22:10:22.526]加载页面时，与ws://localhost:8888/ws的连接中断。它与“var ws=new WebSocket”（“ws://“+”localhost“+”：“+”888“+”/ws”）有关；“。我已将我的原始问题更新为ammended版本。远程调试websocket问题将有点挑战性，因为它们相当特定于您所处的环境。不过，我可以就如何处理它给出一些建议：尝试删除尽可能多的映射组件，如果您将其简化为JU，则看看ws是否有效。”t ready函数和onmessage。感谢您的回复…ws的工作方式似乎与我运行web控制台时的工作方式相同，数据正在进入并添加到数组中。我将数组更改为标准数组，并在控制台中进行检查，它工作得很好。这是不是因为数据总是从服务器接收并推送到它所在的数组中这一步，所以永远不会在地图上绘制数组元素？