从web浏览器获取位置

Get location from the web browser

本文关键字:位置 获取 浏览器 web      更新时间:2023-09-26

我只是一个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);
        }
    });
}
}

你可以使用浏览器的位置服务并在初始化

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

,并将其传输给其他用户,以便通过创建消息对象

将联系人标记作为单独的事件或作为消息的一部分更新。

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

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