谷歌地图API和socket.io

google map api and socket.io

本文关键字：io socket API 谷歌地图      更新时间：2023-09-26

我很晚了，通过插座从gps单元传输到我的浏览器。如下所示:

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

我有一个像这样的谷歌地图:

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

我到底该如何在地图中注入lat和lng ?我曾尝试组合功能，但谷歌地图似乎打破，如果我添加任何特殊的东西，它排除了范围变量。任何帮助都是感激的!

  1. 使地图全局
  2. 检查纬度和经度div是否都有有用的值
  3. 使用这些值来设置地图位置

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);
相关文章：