google 映射 api 和 socket.io

Question

我正在通过 socket.io 从 gps 装置获取经纬度到我的浏览器，如下所示：

        socket.on("web_latitude", function(msg) {
            document.getElementById("latitude").innerHTML = msg
        })

        socket.on("web_longitude", function(msg) {
            document.getElementById("longitude").innerHTML = msg
        })

我有一个像这样的 google 地图：

    function initialize() {

      var mapOptions = {
        center: { lat: -46.85, lng: 150.644},
        marker: {lat: client_lat, lng:client_lng},
        zoom: 8
      };

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

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

究竟如何将经纬度注入地图？我已经尝试组合函数，但是 google 映射似乎会中断，如果我向它添加任何排除范围变量的特殊内容。感谢您的帮助！

Answer 1

使地图成为全球地图
检查纬度和经度 div 是否有有用的值
使用这些值设置地图位置

var map;
function initialize() {

  var mapOptions = {
    center: { lat: -46.85, lng: 150.644},
    marker: {lat: client_lat, lng:client_lng},
    zoom: 8
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}
socket.on("web_latitude", function (msg) {
  document.getElementById("latitude").innerHTML = msg;
  setMap();
});

socket.on("web_longitude", function (msg) {
  document.getElementById("longitude").innerHTML = msg;
  setMap();
});

function setMap() {
  if ((document.getElementById('latitude') != '') && (document.getElementById('longitude') != '')) {
    map.setCenter(new google.maps.LatLng(
      parseFloat(document.getElementById('latitude').innerHTML),
      parseFloat(document.getElementById('longitude').innerHTML)));
  }
}       
google.maps.event.addDomListener(window, 'load', initialize);

google 映射 api 和 socket.io

google map api and socket.io

javascript

google-maps

socket.io