Holen Sie sich Standort aus dem Web-Browser

Question

Ich bin nur ein Nodejs Neuling. Ich habe ein kleines einfaches Projekt. Es ist Call-Map-Chat. Dies sind 2 Hauptdateien meines Projekts core.js und app.js. Ich möchte, dass beim Erstellen eines Benutzers meine App den Standort vom Webbrowser abruft und das Symbol jedes Benutzers darauf zeigt. Bitte hilf mir.

App.js

var express = require("express"), 
app = require("express")(), 
http = require("http").Server(app), 
io = require("socket.io")(http), 
util = require("util"), 
fs = require("fs"); 

var server_user = []; //info of user 
var clients = []; //user's socket 
var group_leader = []; 
http.listen(2500, function() { 
console.log("Connected to :2500"); 
}); 

app.use(express.static(__dirname)); 
app.get("/", function(req, res) { 
res.sendfile(__irname + "/index.html"); 
}); 

io.sockets.on("connection", function(socket) { 
io.emit("user_connection", socket.id); 

io.emit("server_user", server_user); 
//Create user 
socket.on("create_user", function(data_user) { 
    server_user.push(data_user); 
    io.emit("create_user", data_user); // 
}); 
//chat 
socket.on("message", function(data_message) { 
    io.emit("message", data_message); 
}) 
socket.on("disconnect", function() { 
    var i = 0; 
    for (var i = 0; i < server_user.length; i++) { 
     if (server_user[i].id == socket.id) { 
      server_user.splice(i, 1); //del 
     } 
    } 
    io.emit("user_disconnect", socket.id); 
    //fs.writeFile('socket.txt', util.inspect(socket, false, null)); 
}); 
//create new group 
socket.on("create_room", function(room_id) { 
    io.sockets.connected[socket.id].join(room_id); 
    group_leader[room_id] = socket.id; 
}); 
socket.on("invite_room", function(id, room_id) { 
    io.sockets.connected[id].emit("invite_room", id, room_id); 
}); 
socket.on("status_invited_room", function(id, room_id, status) { 
    if (status == 1) { 
     io.sockets.connected[id].join(room_id); 
    } 
}); 
socket.on("event_room", function(room_id, message_type, event_room) { 
    if (group_leader[room_id] == socket.id) { 
     if (message_type == "travel") { 
      socket.in(room_id).emit("event_room", getUserRoom(room_id), message_type, event_room); 
      io.sockets.connected[socket.id].emit("event_room", getUserRoom(room_id), message_type, event_room); 
      console.log("Da chi duong"); 
     } else if (message_type == "bounds" || message_type == "streetview") { 
      socket.in(room_id).emit("event_room", '', message_type, event_room); 
     } 
    } 
}); 
socket.on("room_message", function(room_id, data_message) { 
    socket.in(room_id).emit("room_message", data_message); 
    io.sockets.connected[socket.id].emit("room_message", data_message); 
}) 
}); 

function getUserRoom(room_id) { 
var user = []; 
for (var key in io.sockets.adapter.rooms[room_id]) { 
    if (io.sockets.adapter.rooms[room_id][key] == true) { 
     user.push(key); 
    } 
} 
return user; 
} 

Core.js

$("#coor_k").val(Math.random() + 12); 
$("#coor_B").val(Math.random() + 107); 
var mapOptions = { 
center: new google.maps.LatLng(12.2484861, 109.183363), 
zoom: 10 
}; 
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
var panorama = map.getStreetView(); 
var directionsService = new google.maps.DirectionsService(); 
var directionsDisplay = new google.maps.DirectionsRenderer(); 
var socket = io(); 
var coordinate = ''; 
var socket_id = ''; 
var time = ''; 
var allFlightPath = []; 
var allMarkerStress = []; 
var streetLineStatus = 0; 
var markers = []; 
var position_from = [], 
infowindow = []; 
serverUserTime = 0; 
createGroup = 0; 
room_id = ''; 

function getServerUser() { 
socket.on("server_user", function(server_user) { 
    if (serverUserTime == 0) { 
     for (var i = 0; i < server_user.length; i++) { 
      data_user = server_user[i]; 
      makeMarkerUser(data_user, server_user[i].id); 
     } 
     serverUserTime = 1; 
    } 
}); 
} 

function makeMarkerUser(data_user, id) { 
if (data_user.sex == "male") { 
    var icon_user = "http://icons.iconarchive.com/icons/hopstarter/face-avatars/24/Male-Face-D4-icon.png"; 
} else { 
    var icon_user = "http://icons.iconarchive.com/icons/hopstarter/face-avatars/24/Female-Face-FC-2-icon.png"; 
} 
markers[id] = new google.maps.Marker({ 
    position: new google.maps.LatLng(data_user.coordinate[0], data_user.coordinate[1]), 
    icon: icon_user 
}); 
markers[id].setMap(map); 
markers[id].id = data_user.id; 

infowindow[id] = new google.maps.InfoWindow(); 
infowindow[id].setContent("<b>" + data_user.name + "</b>"); 
infowindow[id].open(map, markers[id]); 

google.maps.event.addListener(markers[id], 'dblclick', function(marker, id) { 
    if (createGroup == 0) { 
     alert("Please create group"); 
    } else { 

     if (data_user.id != socket_id) { 
      socket.emit("invite_room", data_user.id, room_id); 
      alert("Sent invite message"); 
     } else { 
      alert("You can't invite yourself"); 
     } 

    } 
}); 
} 

$(function() { 
socket.on("invite_room", function(id, invite_room_id) { 
    if (socket_id == id) { 
     $("#invite_form").show(); 
    } 
    $("#invite_form #no").click(function() { 
     $("#invite_form").hide(); 
    }); 
    $("#invite_form #yes").click(function() { 
     room_id = invite_room_id; 
     socket.emit("status_invited_room", id, invite_room_id, 1); 
     $("#invite_form").hide(); 
    }); 
}); 

getServerUser(); 
socket.on("user_connection", function(id) { 

    if (socket_id == '') { 
     socket_id = id; 

    } 
}); 
$("#send_message").click(function() { 
    data_message = { 
     id: socket_id, 
     message: $("#chat_message").val(), 
     name: $("#user_name").val() 
    }; 
    $("#chat_message").val(""); 
    socket.emit("message", data_message); 
}); 
$("#button_login").click(function() { 
    $("#login_panel").css({ 
     display: "none" 
    }); 
    $("#world, .chat_area").css({ 
     display: "block" 
    }) 
    var name = $("#user_name").val(); 
    var sex = $("#sex input:checked").prop("id"); 
    coordinate = [$("#coor_k").val(), $("#coor_B").val()]; 
    socket.emit("create_user", { 
     id: socket_id, 
     name: name, 
     sex: sex, 
     coordinate: coordinate 
    }); 
}); 


socket.on("create_user", function(create_user) { 
    makeMarkerUser(create_user, create_user.id); 
}); 

socket.on("user_disconnect", function(id) { 
    markers[$.trim(id)].setMap(null); 
    markers[$.trim(id)] = undefined; 
}) 

socket.on("message", function(data_message) { 
    if (typeof(infowindow[data_message.id]) === 'undefined') { 
     infowindow[data_message.id] = new google.maps.InfoWindow(); 
     infowindow[data_message.id].setContent("<b>" + data_message.name + "</b>: " + data_message.message); 
     infowindow[data_message.id].open(map, markers[data_message.id]); 
    } else { 
     infowindow[data_message.id].setContent("<b>" + data_message.name + "</b>: " + data_message.message); 
    } 
    $("#message").html($("#message").html() + "<b>" + data_message.name + "</b>: " + data_message.message + "<br/>"); 
    if (time != '') { 
     clearTimeout(time); 
    } 
    setTimeout(function() { 
     /*if (typeof(infowindow[data_message.id]) !== undefined) { 
      infowindow[data_message.id].close(); 
      delete infowindow[data_message.id]; 
     }*/ 
     infowindow[data_message.id].setContent("<b>" + data_message.name + "</b>"); 
    }, 5000); 
}); 
socket.on("event_room", function(user_in_room, message_type, event_room) { 
    if (message_type == "travel") { 
     position_from = []; 
     for (var i = 0; i < user_in_room.length; i++) { 
      position_from.push([markers[user_in_room[i]].Ie.ka.x, markers[user_in_room[i]].Ie.ka.y]); //Hồi trước He giờ Ie, con mẹ Google Map 
     } 
     position_to = [event_room[0], event_room[1]]; 
     travel(position_from, position_to); 
    } else if (message_type == "bounds") { 
     map.setOptions({ 
      "zoom": event_room.zoom, 
      "center": event_room.center 
     }); 
    } else if (message_type == "streetview") { 
     console.log(event_room); 
     if (event_room.show == 1) { 
      panorama.setVisible(true); 
      panorama.setPano(event_room.setPano); 
      panorama.setPov(event_room.getPov); 
      panorama.setPosition({ 
       "lat": event_room.getPosition.k, 
       "lng": event_room.getPosition.B 
      }); 
      panorama.setZoom(event_room.getZoom); 
     } else { 
      panorama.setVisible(false); 
     } 
    } 
    }); 
google.maps.event.addListener(map, 'dblclick', function(event) { 
    if (room_id != '') { 
     socket.emit("event_room", room_id, "travel", [event.latLng.lat(), event.latLng.lng()]); 
    } else { 
     position_from = [coordinate]; 
     position_to = [event.latLng.lat(), event.latLng.lng()]; 
     travel(position_from, position_to); 
    } 
}); 
google.maps.event.addListener(map, 'bounds_changed', function() { 
    if (room_id != '') { 
     var mapview = {}; 
     center = { 
      "lat": map.center.k, 
      "lng": map.center.B 
     } 
     mapview.zoom = map.zoom; 
     mapview.center = center; 
     socket.emit("event_room", room_id, "bounds", mapview); 
    } 
}); 
google.maps.event.addListener(panorama, 'visible_changed', function() { 
    streetview = {}; 
    if (panorama.getVisible()) { 
     streetview.show = 1; 
     streetview.getPano = panorama.getPano(); 
     streetview.getPov = panorama.getPov(); 
     streetview.getPosition = panorama.getPosition(); 
     streetview.getZoom = panorama.getZoom(); 
    } else { 
     streetview.show = 0; 
    } 
    socket.emit("event_room", room_id, "streetview", streetview); 
}); 

function streetview_changed(panorama) { 
    streetview = {}; 
    streetview.show = 1; 
    streetview.getPano = panorama.getPano(); 
    streetview.getPov = panorama.getPov(); 
    streetview.getPosition = panorama.getPosition(); 
    streetview.getZoom = panorama.getZoom(); 
    socket.emit("event_room", room_id, "streetview", streetview); 
} 
google.maps.event.addListener(panorama, 'position_changed', function() { 
    streetview_changed(panorama); 
}); 
google.maps.event.addListener(panorama, 'pov_changed', function() { 
    streetview_changed(panorama); 
}); 
google.maps.event.addListener(panorama, 'zoom_changed', function() { 
    streetview_changed(panorama); 
}); 
$(".world").click(function() { 
    $("#world").css({ 
     display: "block" 
    }); 
    $("#room").css({ 
     display: "none" 
    }); 
    return false; 
}); 
$("#createroom").click(function(event) { 
    if (createGroup == 0 && room_id == '') { 
     room_id = Math.random().toString(36).substring(7); 
     socket.emit("create_room", room_id); 
     createGroup = 1; 
     $("#room_message").html("Created new room<br/>"); 
    } 
    $("#world").css({ 
     display: "none" 
    }); 
    $("#room").css({ 
     display: "block" 
    }); 
    return false; 
}); 
$("#send_room_message").click(function(event) { 
    var data_message = { 
     message: $("#chat_room_message").val(), 
     name: $("#user_name").val() 
    } 
    socket.emit("room_message", room_id, data_message); 
    $("#chat_room_message").val(""); 
    console.log(room_id); 
    //console.log(data_message); 
}); 
socket.on("room_message", function(data_message) { 
    $("#room_message").html($("#room_message").html() + "<b>" + data_message.name + "</b>: " + data_message.message + "<br/>"); 
}) 
}); 

function travel(from, to) { 
for (var i = 0; i < Math.max(allFlightPath.length, allMarkerStress.length); i++) { 
    if (typeof(allFlightPath[i]) !== undefined) { 
     allFlightPath[i].setMap(null); 
    } 
    if (typeof(allMarkerStress[i]) !== undefined) { 
     allMarkerStress[i].setMap(null); 
    } 
} 
allFlightPath = []; 
allMarkerStress = []; 
for (var i = 0; i < from.length; i++) { 
    var request = { 
     origin: new google.maps.LatLng(from[i][0], from[i][1]), 
     destination: new google.maps.LatLng(to[0], to[1]), //lat, lng 
     travelMode: google.maps.TravelMode["WALKING"] 
    }; 
    directionsService.route(request, function(response, status) { 
     var flightPath = '', 
      marker_stress = ''; 
     if (status == google.maps.DirectionsStatus.OK) { 
      data = response.routes[0].overview_path; 
      color = "#ff0000"; 
      opacity = 1; 

      flightPath = new google.maps.Polyline({ 
       path: data, 
       geodesic: true, 
       strokeColor: color, 
       strokeOpacity: opacity, 
       strokeWeight: 2, 
       map: map 
      }); 
      flightPath.setMap(map); 
      marker_stress = new google.maps.Marker({ 
       position: new google.maps.LatLng(data[data.length - 1].k,  data[data.length - 1].B), 
       icon: "http://icons.iconarchive.com/icons/fatcow/farm- fresh/32/hand-point-270-icon.png" 
      }); 
      marker_stress.setMap(map); 
      allFlightPath.push(flightPath); 
      allMarkerStress.push(marker_stress); 
     } 
    }); 
} 
} 

Answer 1

können Sie den Browser Standort-Dienste nutzen und rufen Sie, wenn Sie initialisieren

navigator.geolocation.getCurrentPosition(function(position) { 
    coordinate = google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
}); 

entweder als separates Ereignis oder als Teil der Nachricht

und übertragen sie an andere Benutzer den Kontakt Marker aktualisieren, indem Sie eine Nachricht Objekt erstellen

Answer 2

Geolocation Mit der Aufgabe ganz einfach. Dieses Code-Snippet erhält den Längen- und Breitengrad.

function getLocation() { if (navigator.geolocation) { // the navigator.geolocation object is supported navigator.geolocation.getCurrentPosition(function(position) { myLatitude = position.coords.latitude; myLongitude = position.coords.longitude; }); } else { alert("Geolocation is not supported by your web browser); } }