NodejsとGooglemapsを利用したWEBアプリについて

###概要
node.jsのWebSocketとgoogleapiのmapを利用して
待ち合わせWEBアプリを作成しています
位置情報取得->マップ表示->自分のMarker表示->infoWindow表示まではできたのですが。

接続されているユーザをMarker表示したいのですが
二回目以降に接続されたユーザがそれ以前に接続されたユーザの
Marker情報を取得するアルゴリズムが思いつきません

またhtml側でインターバルを取りsocketを送って位置更新しているのですが
過去の自分のMarkerを消すことは可能なのですが
他人の過去のMarkerを消すことができません
消すよりも移動の方がいいと思ったのですが移動するにもMarker情報を
サーバ側で持つこともhtml側で判断するのも試したのですが、わかりませんでした。

###該当のソースコード

index.html側の関係するScript(諸々省略します)

// script開始
var socket = io.connect('http://localhost:8000');

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) 
	{
		latitude = position.coords.latitude;
		longitude = position.coords.longitude;
		map.panTo(new google.maps.LatLng(latitude,longitude));
		var mark = [latitude,longitude];
		socket.emit("moveMarker",mark);
	}

function start()
	{
		var latlng = new google.maps.LatLng(35,140);
		var opts = 
		{
			zoom: 19,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
	    map = new google.maps.Map(document.getElementById("map_canvas"), opts);
	}
socket.on("markMove",function(markMove)
	{
		var LatLng = new google.maps.LatLng(markMove[0],markMove[1]);
		var marker = new google.maps.Marker({
			position : LatLng,
			map : map,
		});
		marker.metadata
		var infoWindow = new google.maps.infoWindow({
			content : "namae"
		});
		marker.addListener("click",function(){
			infoWindow.open(map,marker);
		});
	});

socket.on("moveMarker",function(mark){
		var latLng = new google.maps.LatLng(mark[0],mark[1]);
		var marker = new google.maps.Marker({
			title : "タイトル用", 
			position : latLng,
			map : map
		});
		var infoWindow  = new google.maps.InfoWindow({
			content : "namae" 
		});
		marker.addListener("click",function(){
			infoWindow.open(map,marker);
		});
		var ul = document.getElementById("marker_List");
		var li = document.createElement("li");
		var title = marker.getTitle();
		li.innerHTML = title;
		ul.appendChild(li);
		google.maps.event.addEventListener(li,"click",function(){
			google.maps.event.trigger(marker,"click");
		});
	});


setInterval("move();",3000);

function move()
	{
		navigator.geolocation.getCurrentPosition(successMove, errorCallback);
	}
function successMove(position)
	{
		latitude = position.coords.latitude;
		longitude = position.coords.longitude;
		var markMove = [latitude,longitude];
		socket.emit("markMove",markMove);
	}
// script終了
<body onload="start();">
      <div id="map_canvas" style="width:500px; height:300px"></div>
</body>


app.js側

var mysql = require("mysql");
var fs = require("fs");
var server = require("http").createServer(function(req, res) {
     res.writeHead(200, {"Content-Type":"text/html"});
     var output = fs.readFileSync("./index.html", "utf-8");
     res.end(output);
}).listen(8000);
var io = require("socket.io").listen(server);
var marker = [];
var i = 0;
io.sockets.on("connection", function (socket) {
	socket.on("moveMarker",function(mark)
	{
		io.sockets.emit("moveMarker",mark);
	});
	socket.on("markMove",function(markMove){
		io.sockets.emit("markMove",markMove);
	});
});

###試したこと

app.js側でmapを定義してそれを接続時に送信して描画
配列でgoogle.maps.markerをapp.js側で持っておき接続時に送信

行動規範の内容に同意します

回答1件

ベストアンサー

サーバ側のon("connection")で受け取ったsocketにはidという接続を固有に識別できる文字列があります。
それを使ってサーバ上に各接続ユーザの情報を保持しておくことが第一の段階だと思います。
以下のコードを参考に、ソケットとマーカーを管理します。

Javascript
1var sockets = {}; // ソケットを管理
2var markers = {}; // 各接続者のマーカーを管理
3io.sockets.on("connection", function (socket) {
4   // 接続されたらまずはリストに入れる
5   sockets[socket.id] = socket;
6   markers[socket.id] = {
7      id:socket.id,
8      latlng:null
9   };
10   socket.on("disconnect", function(e) {
11      io.socket.emit("disconnected", {id:socket.id});// 全員に誰かが接続切断されたことを通知
12      delete sockets[socket.id];
13      delete markers[socket.id];
14   });
15}

あとは今サーバ側が送信している位置情報に、socket.idを付与して渡してやり、クライアント側でidの一致するマーカーを移動、削除してやればよいと思います。
また、過去に接続しているユーザの位置情報はサーバ側のmarkersに記録されているので、全ユーザの位置情報を取るイベントを新しく作成して、サーバ側でそれを受け取った時に全ユーザの座標を返す通知をしてやればよいと思います。

投稿2016/06/08 06:36

編集2016/06/08 06:41