Question

我已建立服务器连接以获取地理位置跟踪数据。我必须在谷歌地图上实时绘制它。我认为折线是我应该使用的。

以下是socket.io连接和数据检索的代码。这是我通过浏览器加载的文件。（client.html）

<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-US"></script>
<script type="text/javascript" src="map.js"></script>
<script type="text/javascript" src="https://cdn.socket.io/socket.io-1.2.0.js"></script>

<div id="map-canvas"></div>
<script>
    var socket = io.connect('some-address');
    socket.on('connect', function () {
    // socket connected successfully
    console.log('socket connected successfully');

    // request for geo_history by passing the trip_id
    socket.emit('geo_history', '45');

    socket.on('geo_history', function(data) {
        // got a geo update
        console.log('geo_update received:');
        console.log(data);
    });
});

</script>
</body>
</html>`

现在map.js文件如下：

function initialize() {
    var some-cen = new google.maps.LatLng('some-lat','some-lang');
    mapOptions = {
    zoom:11,
    center: some-cen,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    streetViewControl: false,
    mapTypeControl: false,
    zoomControl: true,
    panControl: false,
    zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.TOP_LEFT
    },
  styles: [{"featureType":"all","stylers":[{"saturation":-100},{"gamma":0.9}]}]
  };

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var coordinates = [];

 var driverPath = new google.maps.Polyline({
     path: coordinates,
 });

 driverPath.setMap(map);

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

我的问题：

1）数据的格式为（如控制台中所示）：Object-＆gt; data（Array） - ＆gt; 0,1,2,3 .............. 每个数字都有自己的坐标，即lat和lang 如何只提取lat和lang？
2）如何更新坐标数组，以便每次收到新坐标时地图都会更新？

Answer 1

YTickLabels

我需要在谷歌地图上绘制通过socket.io连接收到的数据。我无法弄清楚怎么样？

1 个答案: