2014-01-23 52 views
0

我有卡車表中SQL.My卡車發送緯度和液化天然氣,以每10秒這樣的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.But我想通過創建獲取數據的谷歌地圖標記從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> 

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

    } 

    } 

    } 
+0

[如何更新Google標記的位置]的可能重複(http://stackoverflow.com/questions/10949436/how-to-update-position-of-google-marker) – geocodezip

+0

謝謝,但它不明確爲了我。 – user3107343

+0

[如何更新Google地圖中多個標記的位置]的可能重複(http://stackoverflow.com/questions/6121733/how-do-i-update-the-locations-of-multiple-markers-in -google-maps) – geocodezip

回答

0

這裏典型的做法是讓你的JavaScript的定期輪詢一些JSON API服務器上每N秒更新位置。簡單的方法是在每個輪詢中下載一組完整的標記。從這裏開始,您可以優化只發送搬遷的卡車的新位置。您還可以發送地圖的東北/西南角(邊界),以將查詢過濾到在當前地圖視口中可見的卡車。

JavaScript輪詢通常通過XHR(XMLHttpRequest)aka 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調用的函數在完成時將新的超時隊列排隊。

更復雜的方法是使用WebSockets將位置更改事件推送到瀏覽器,但這需要更高級的技能。而且您需要Windows Server 2012來支持WebSockets。

相關問題