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

これにより、クリック関数のコードの他の部分から latLng にアクセスできるようになります。

その他の考えられる問題:

徐々にデータをマップに追加したい場合、一般的に構造が少しずれています。やりたいことは、Web ページ内に単一のマップを作成し、そこに継続的にデータを追加することです。毎回新しいマップを作成する必要はありません。おそらく行うべきことは、クリックではなく、ready 関数内でマップを作成することです。

また、Google マップには単一のヒートマップ レイヤーがあります。受信したデータのビットごとに新しいヒートマップを作成すると、以前のヒートマップに入れたものすべてが上書きされます。ただし、最新の編集を考えると、すでに同じ結論に達しているように見えます。

また、あなたの 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 セットアップがないため、このコードをテストすることはできませんが、ここから先に進むためのより良い基盤が得られることを願っています.

于 2012-11-17T19:57:01.897 に答える