如何刷新谷歌标记的经纬度？答案

【问题标题】：How to refresh latitude and longitude of google markers?如何刷新谷歌标记的经纬度？
【发布时间】：2014-01-23 23:52:06
【问题描述】：

我在 SQL 中有 Trucks 表。我的 Trucks 每 10 秒将 Lat 和 Lng 发送到 SQL，就像这张表一样

 dbo.Trucks

ID    readTime                      TruckID          Lat             Lng

1     2014-01-24  18:02:47.983        78             36,785          35,4672

2     2014-01-24  18:03:11.983        78             34,785          37,341

3     2014-01-24  18:03:45.541        78             31,785          34,242

.  

.

780   2014-01-24  22:42:45.541         .                .               .

我通过使用 JSON.Parse 从 SQL 获取数据在谷歌地图上创建了标记。但我想刷新标记并将它们移动到地图上。（不像按 F5。有计时器或超时）。我不知道怎么做我在这些代码中使用了计时器或超时。

源码：http://www.aspdotnet-suresh.com/2013/05/aspnet-show-multiple-markers-on-google.html

 <script type="text/javascript">

 function initialize() 

{

 var markers = JSON.parse('<%=OnlineTrucks() %>');

 var mapOptions = 

 {

    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),

    zoom: 5,

    mapTypeId: google.maps.MapTypeId.ROADMAP


   };

var infoWindow = new google.maps.InfoWindow();

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


image = '/Images/truck.png';


     for (i = 0; i < markers.length; i++) {


    var data = markers[i]

    var myLatlng = new google.maps.LatLng(data.lat, data.lng);

    var marker = new google.maps.Marker({

    position: myLatlng,

    map: map,

   title: data.title,

   icon: image,

    });


  (function(marker, data) {


      google.maps.event.addListener(marker, "click", function(e) {

      infoWindow.setContent(data.description);

      infoWindow.open(map, marker);


         });

        })(marker, data);

          }


}


</script>
</head>

<body onload="initialize()">

 <form id="form1" runat="server">

 <div id="map_canvas" style="width: 500px; height: 400px"></div>

public string OnlineTrucks() {

DataTable dt = new DataTable();

    using (SqlConnection con = new SqlConnection("Data 
Source=localhost;Initial Catalog=MyDB;Integrated Security=true"))
{   
    using (SqlCommand cmd = new SqlCommand("select 
title=TruckID,lat=Lat,lng=Lat from Trucks", con))
{

con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);

    System.Web.Script.Serialization.JavaScriptSerializer serializer = new 
System.Web.Script.Serialization.JavaScriptSerializer();
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
    Dictionary<string, object> row;

    foreach (DataRow dr in dt.Rows)
    {

    row = new Dictionary<string, object>();

    foreach (DataColumn col in dt.Columns)

    {

    row.Add(col.ColumnName, dr[col]);

    }

    rows.Add(row);

    }

    return serializer.Serialize(rows);

    }

    }

    }

【问题讨论】：

how to update position of google marker的可能重复
谢谢，但我不清楚。
How do I update the locations of multiple markers in google maps的可能重复
我正在使用 asp.net 和 sql 先生

标签： c# javascript google-maps google-maps-api-3

【解决方案1】：

这里的典型方法是让您的 JavaScript 每 N 秒定期轮询服务器上的一些 JSON API 以获取更新的位置。简单的方法是在每次投票时下载完整的标记集。从这里，您可以优化以仅发送已移动卡车的新位置。您还可以发送地图的东北/西南角（边界）以将查询过滤到当前地图视口中可见的卡车。

JavaScript 轮询通常通过 XHR (XMLHttpRequest) 又名 AJAX 完成。

JavaScript 代码可能大致类似于：

var delay = 10 * 1000 /* milliseconds per second */;
var markers = [];  // an array of google.maps.Marker instances

function poll() {
  var req = new XMLHttpRequest();
  req.open('GET', 'http://www.mozilla.org/', true);
  req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
    if(req.status == 200)
      redraw(req.responseText);
    else
      alert("Error loading data\n");
    }
    // queue the next polling request
    window.setTimeout(poll, delay);
  };
  req.send(null);
}

// start the polling queue
poll();

// handles updating any changed markers in the global markers array
function redraw(response) {
   var data = JSON.parse(response); 

   // assume data looks something like `[ {id: 1, latitude: 10, longitude: 20 } ]`
   data.forEach(function(item) {
     markers.some(function(marker) {
       if (marker.id === item.id) {
          marker.setPosition(new google.maps.LatLng(item.latitude, item.longitude));
          return true;
       }
     });
   });
 }

此代码与完整解决方案的外观相去甚远，但希望能触及主要概念。请注意，Google Maps API v3 无法查询地图画布上的标记。您必须自己通过一些变量（最好不是像上面那样的全局变量）来维护标记的集合。您使用window.setTimeout 每 N 毫秒调用一次函数。与递归类似，setTimeout 调用的函数在完成时将新的超时排队返回给自身。

更复杂的方法是使用 WebSocket 将位置更改事件推送到浏览器，尽管这需要更高级的技能。并且您需要 Windows Server 2012 来支持 WebSockets。

【讨论】：