1

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

因此，当从服务器接收到数据时，它应该在我的 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>

是否有一种方法可以在接收到数据时将其存储到数组中，但是我不确定如何使用数组中的元素更新地图是否已接收到。谢谢

4

1 回答 1

2

我不能确定这是否是唯一的问题，但您似乎在这里遇到了范围界定问题 -

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

这将使 click 函数中代码的其他部分可以访问 latLng。

其他一些可能的问题：

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

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

我也不太确定您的 websocket 代码是否足够好。websocket“onmessage”函数不会立即返回结果：相反，它提供有关如何处理未来任何时候传入的任何数据的说明。因此，如果您想在每次数据进入时更新地图，您不需要在点击事件上对 websockets 做任何事情。

这将导致像这样结构松散的代码 -

$(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 设置，但希望这可以为您提供更好的基础。

于 2012-11-17T19:57:01.897 回答