从Web浏览器获取位置

时间：2016-08-18 15:33:19

标签： javascript node.js google-maps

我只是一个Nodejs新手。 我有一个简单的小项目。  它呼叫地图聊天。这是我的项目core.js和app.js的2个主要文件。我想在创建用户时，我的应用程序将从Web浏览器获取位置，每个用户的图标将指向它。请帮助我。

  

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

2 个答案:

答案 0 :(得分：0)

您可以使用浏览器位置服务并在初始化时调用

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

并将其传输给其他用户，以通过创建消息对象将联系人标记更新为单独的事件或作为消息的一部分

答案 1 :(得分：0)

使用地理定位任务非常简单。此代码段将获得一个纬度和经度。

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

相关问题
最新问题