个人中心
gpt4 book ai didi

javascript - 当新用户登录时，使用 socket io 将标记添加到谷歌地图

转载 作者：搜寻专家 更新时间：2023-11-01 00:01:24 26 4
gpt4 key购买 nike

我有一个谷歌地图，可以对用户进行地理定位并在 map 上放置一个标记。我想要在新用户加载 map 时添加一个新标记。为此，我使用套接字 io。

然而，想要的结果并没有发生!浏览器保持打开状态的时间越长，用户和标记似乎会继续生成。

repo 地址 https://github.com/Stacca/geo-socket

感谢任何建议!

我的 Node 服务器看起来像这样..

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>

最佳答案

我相信问题比代码更深入。

如果我错了请纠正我，但我需要一个 session 以便浏览器知道有两个用户？

或者以某种方式为用户提供唯一标识符。

添加了对 HTMl 的监听

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

这有帮助

关于javascript - 当新用户登录时，使用 socket io 将标记添加到谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30376481/

26 4 0
文章推荐： swift - 向 uiview 添加约束时的 SIGABRT
文章推荐： php - 判断一周是奇数还是偶数
文章推荐： php - 如何在每个链接中添加 &ref=123
文章推荐： javascript - Amazon S3 Node.js SDK 删除对象
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com