[英]How to refresh latitude and longitude of google markers?
我在SQL中有Trucks表。我的Trucks每隔10秒向SQL發送Lat和Lng到此表
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獲取數據在Google地圖上創建了標記,但是我想刷新標記並將其在地圖上移動(不像按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>
C#
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);
}
}
}
這里的典型方法是讓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。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.