使用socket io來標記添加到谷歌地圖時

新用戶登錄我有一個谷歌地圖是將進行地理定位的用戶和放置標記在地圖上。我想要在新用戶加載地圖時添加新標記。爲此，我使用套接字io。使用socket io來標記添加到谷歌地圖時

但是預期的結果沒有發生！用戶並沒有看到彼此和標記似乎繼續產生瀏覽器保持打開的時間越長。

REPO AT https://github.com/Stacca/geo-socket

讚賞任何建議，謝謝！

我的節點服務器看起來是這樣的..

var express = require('express'); 
var app = express(); 
var server = require('http').createServer(app); 
var path = require("path") 
var port = process.env.PORT || 3000 
var http = require('http').Server(app); 

app.use(express.static(__dirname + '/')); 

app.get('/', function (req, res) { 
res.sendFile(path.join(__dirname + '/app/index.html')); 
}); 


var io = require('socket.io')(http); 

io.on('connection', function(socket){ 
console.log('a user connected'); 

socket.on('marker', function(data) { 

console.log('marker latitude: ' + data.lat + ', marker longitude:' +  
data.lng); 
socket.broadcast.emit('show-marker', data); 
}); 

}); 
http.listen(3000, function(){ 
console.log('five minute catch up is on port 3000'); 
}); 

module.exports = server;

我的JS文件

"use strict"; 
var map; 
var markers = [] 

function initialize() { 
var mapOptions = { 
zoom: 16 
}; 
map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

google.maps.event.addDomListener(window, 'load', initialize); 
google.maps.event.addDomListener(window, "resize", function() { 
var center = map.getCenter(); 
google.maps.event.trigger(map, "resize"); 
map.setCenter(center); 
}); 


if(navigator.geolocation) { 
navigator.geolocation.watchPosition(function(position) { 
var pos = new google.maps.LatLng(position.coords.latitude, 
            position.coords.longitude); 

    var infowindow = new google.maps.InfoWindow({ 
    map: map, 
    position: pos, 
    content: 'You are here' 
    }); 

    map.setCenter(pos); 
    }, function() { 
    handleNoGeolocation(true); 
    }); 
} else { 
// Browser doesn't support Geolocation 
handleNoGeolocation(false); 
} 
} 
function handleNoGeolocation(errorFlag) { 
if (errorFlag) { 
var content = 'Error: The Geolocation service failed.'; 
} else { 
var content = 'Error: Your browser doesn\'t support geolocation.'; 
} 

var options = { 
map: map, 
position: new google.maps.LatLng(60, 105), 
content: content 
}; 
var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 


// listen for Marker event 
google.maps.event.addListener(map, 'load', function(event) { 

var marker = addMarker(event.latLng); 


socket.emit('marker', { 
    'lat': marker.position.k, 
    'lng': marker.position.D 
}); 
}); 

// Add a marker to the map 
function addMarker(location) { 

var marker = new google.maps.Marker({ 
    position: location, 
    map: map 
}); 

markers.push(marker); 

console.log(location); 
console.log("marker: " + marker.position.k + " " + marker.position.D); 

return marker; 
} 

//Listens for other users markers 
socket.on('show-marker', addMarker);

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 
<link rel="stylesheet" 
href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
<link rel="stylesheet" href="app/styles/main.css"> 
<!-- Internal map style (cant remove)--> 
    <style type="text/css"> 
    html, body, #map-canvas { height: 90%; margin: 0; padding: 0;} 
</style> 
<!-- Public API --> 
<script src="https://maps.googleapis.com/maps/api/js? 
v=3.exp&signed_in=false"></script>

<div id="map-canvas"></div> 
<!-- build:js(.) scripts/vendor.js --> 
<!-- bower:js --> 
<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 
<script src="bower_components/angular-animate/angular-animate.js"> 
</script> 
<script src="bower_components/angular-cookies/angular-cookies.js"> 
</script> 
<script src="bower_components/angular-resource/angular-resource.js"> 
</script> 
<script src="bower_components/angular-route/angular-route.js"></script> 
<script src="bower_components/angular-sanitize/angular-sanitize.js"> 
</script> 
<script src="bower_components/angular-touch/angular-touch.js"></script> 


    <!-- build:js({.tmp,app}) scripts/scripts.js --> 
    <script src="app/scripts/app.js"></script> 
    <script src="app/scripts/controllers/main.js"></script> 
    <script src="app/scripts/map.js"></script> 
    <script src="app/scripts/controllers/about.js"></script> 
    <!-- socket scripts --> 
    <script src="/socket.io/socket.io.js"></script> 
    <script> var socket = io();</script> 
</body> 
</html>

來源

2015-05-21 Stacca

你能以測試的行爲提供HTML樣本？該代碼似乎是正確的，這是你具體的問題？您還需要考慮以下情況： 1）存儲實際標記的列表，因此當用戶第一次進入該網站時，它將添加所有活動的標記。 2）當用戶從套接字退出時刪除標記。 – ecarrizo

是的，謝謝。現在附加HTML。問題是新用戶（即localhost 3000上的新瀏覽器）不會生成新標記。 – Stacca

爲了讓它正常工作（可以運行應用程序，但似乎從未調用過addMarker（也許地圖事件永不會觸發），所以我開始在'info'窗口顯示時調用socket.emit，服務器獲取套接字消息，但似乎客戶端沒有收到任何時候emmit'show-marker'。我會深入看看下午晚上。sry。 – ecarrizo

我相信問題比代碼更深入。

糾正我，如果我錯了，但這樣的瀏覽器知道有兩個用戶，我需要一個會話？

或給用戶一個唯一的標識符某種方式。

添加了一個聽爲HTML

socket.on('show-marker', function(data) { 
    console.log(data); 
    var loc = new google.maps.LatLng(data.lat, 
            data.lng); 
    addMarker(loc, data.socketId);

，這有助於

來源

2015-05-22 12:29:34 Stacca

在你的節目標誌物事件，你是不是調用函數，或者傳遞數據。在客戶端上你的代碼行：

socket.on('show-marker', addMarker);

應該是：

socket.on('show-marker', addMarker(location));

沒有你不調用函數的括號，你只是引用內存中的函數的位置，這是爲什麼addMarker永遠被解僱。如果沒有參數，addMarker函數會收到一個空值，並且它將無法添加標記。

來源

2015-05-21 19:41:26

是的，這是主要問題之一。但是，添加事件監聽將標記消息發送到服務器的命令也不會被調用。所以服務器沒有收到消息，然後無法執行回調，這意味着顯示標記 – ecarrizo

你的意思是在服務器？我認爲這將顯示新的標記。 socket.broadcast.emit（'show-marker'，data）; – Stacca

我已更新服務器markers.push（socket.id）沒有運氣 – Stacca

使用socket io來標記添加到谷歌地圖時

回答

相關問題