2016-01-24 146 views
-1

這是我第一次發佈在這裏,我總是閱讀偉大的解決方案。我陷入了困境,我不太確定我是否正沿着正確的道路前進。谷歌地圖刷新標記

基本上我想顯示在谷歌地圖上的汽車數量的位置,現在我通過另一個程序獲取GPS信息,數據正在更新到MS Access數據庫。我需要頁面每10秒刷新一次標記,並且每5分鐘刷新一次流量數據。

P.S.我知道MS Access數據庫是舊帽子,這是另一個應該很快會改變的故事!

這是我更新的頁面代碼: -

<!DOCTYPE html> 
<html> 
<% 
'declare the variable that will hold new connection object 
Dim Connection  
'create an ADO connection object 
Set Connection=Server.CreateObject("ADODB.Connection") 

'declare the variable that will hold the connection string 
Dim ConnectionString 
'define connection string, specify database driver and location of the database 
ConnectionString="PROVIDER=Microsoft.Jet.OLEDB.4.0;" & "Data Source= c:\easybook\tables.mdb" 

'open the connection to the database 
Connection.Mode=adModeRead 
Connection.Open ConnectionString 
%> 
<head> 
<title>Live Map Display</title> 
<meta content="text/html; charset=UTF-8" http-equiv="content-type" /> 
<link href="assets/css/ticketstyle.css" media="all" rel="stylesheet" type="text/css" /> 
<script src="assets/js/jquery.min.js"></script> 
<script src="http://maps.google.com/maps/api/js" type="text/javascript"></script> 
<script> 

var map; 
var mapMarkers = []; // Array is declared and initialized here 

function initialize() { 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 14, 
     panControl: false, 
     zoomControl: false, 
     mapTypeControl: false, 
     streetViewControl: false, 
     overviewMapControl: false, 
     center: new google.maps.LatLng(53.39659541993,-2.54446649561), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var trafficLayer = new google.maps.TrafficLayer(); 
     trafficLayer.setMap(map); 

    var auto_remove = true; 

    /*window.setInterval(function() {loadMarkers()}, 1000); // refreshes every 10 seconds*/ 
}; 

function loadMarkers() { 
    for (var i = 0; i < mapMarkers.length; i++) { 
     mapMarkers[i].setMap(null); // removes marker from the map 
    } 
    mapMarkers = []; // reinitialize the array 

    var markers = document.getElementsByTagName("car"); 

    for (var i = 0; i < markers.length; i++) { 
     location = { 
      label : markers[i].getAttribute("label"), 
      icon : markers[i].getAttribute("image"), 
      labelClass: "labels", // the CSS class for the label 
      pointlat : parseFloat(markers[i].getAttribute("lat")), 
      pointlng : parseFloat(markers[i].getAttribute("lng")) 
     }; 

     console.log(location); 

     mapMarkers.push(new google.maps.Marker({ 
       position: new google.maps.LatLng(location.pointlat, location.pointlng), 
       map: map, 
       labelClass: "label", // the CSS class for the label 
       label : markers[i].getAttribute("label"), 
       icon : markers[i].getAttribute("image"), 
      }) 
     ); 
    } 
    document.getElementById('car'); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<script src="http://ajax.googleapis.com/ajax/ 
libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script> 
</head> 

<body> 
<% 
'declare the variable that will hold our new object 
Dim Recordset 
'create an ADO recordset object 
Set Recordset=Server.CreateObject("ADODB.Recordset") 

'declare the variable that will hold the SQL statement 
Dim SQL  
SQL="SELECT * FROM cartable WHERE stat>0" 
Dim carno, stat, Lat, Lng 
'Open the recordset object executing the SQL statement and return records 
Recordset.Open SQL, Connection 
%><% 
'first of all determine whether there are any records 
If Recordset.EOF Then 
Response.Write("") 
Else 
'if there are records then loop through the fields 
%> 
<div id="header"> 
    <div id="header-left"> 
     <h1>MapLive</h1> 
    </div> 
    <div id="header-right"> 
    </div> 
</div> 
<div id="main"> 

<cars>  
<%Do While NOT Recordset.Eof %> 
<car lng='<%Response.write Recordset("long")%>' lat='<%Response.write Recordset("lat")%>' label='<%Response.write Recordset("carno")%>' image='assets/images/loc-stat<%Response.write Recordset("stat")%>.png'/> 
<%Recordset.MoveNext  
Loop 
End If 
%> 
</cars> 

<div id="map"></div> 
</div> 

</body> 
<% 
Recordset.Close 
Set Recordset=Nothing 
Connection.Close 
Set Connection=Nothing 
%> 
</html> 

希望有人能提供一些線索,我怎麼刷新標記,被抓我的頭,和其他的例子,我看不同編碼的,我猜這是Google Maps API v3。

感謝您的時間提前...

院長

回答

0

最簡單的將是全球範圍內,然後.push(new google.maps.Marker({...})引用標記在一個陣列到您的陣列。然後,您需要在穿過陣列的頁面上設置計時器,並將標記貼圖設置爲空,以便通過setMap(null)將其從地圖中移除。

var map; 
var mapMarkers = []; // Array is declared and initialized here 

function initialize() { 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 14, 
     panControl: false, 
     zoomControl: false, 
     mapTypeControl: false, 
     streetViewControl: false, 
     overviewMapControl: false, 
     center: new google.maps.LatLng(53.39659541993,-2.54446649561), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var trafficLayer = new google.maps.TrafficLayer(); 
     trafficLayer.setMap(map); 

    var auto_remove = true; 

    window.setInterval(function() {loadMarkers()}, 10000); // refreshes every 10 seconds 
}; 

function loadMarkers() { 
    for (var i = 0; i < mapMarkers.length; i++) { 
     mapMarkers[i].setMap(null); // removes marker from the map 
    } 
    mapMarkers = []; // reinitialize the array 

    var image = { 
     size: new google.maps.Size(16, 26), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(8, 26)  
    }; // this isn't being used? 

    var markers = document.getElementsByTagName("car"); 

    for (var i = 0; i < markers.length; i++) { 
     location = { 
      label : markers[i].getAttribute("label"), 
      icon : markers[i].getAttribute("image"), 
      labelClass: "labels", // the CSS class for the label 
      pointlat : parseFloat(markers[i].getAttribute("lat")), 
      pointlng : parseFloat(markers[i].getAttribute("lng")) 
     }; 

     console.log(location); 

     mapMarkers.push(new google.maps.Marker({ 
       position: new google.maps.LatLng(location.pointlat, location.pointlng), 
       map: map, 
       labelClass: "label", // the CSS class for the label 
       label : markers[i].getAttribute("label"), 
       icon : markers[i].getAttribute("image"), 
      }); 
     ); 
    } 
    document.getElementById('car').addEventListener('100', cars); 
}; 
google.maps.event.addDomListener(window, 'load', initialize); 
+0

謝謝您的回覆,我正在努力編寫該代碼。你能給我一個例子,關於如何使用數組? – Dean

+0

我已經添加了如何在我的編輯中做到這一點。爲了簡單起見,我將數組設置爲全局。 window.setInterval將每x毫秒調用一次函數'loadMarkers'。 –

+0

謝謝,得到en SyntaxError:缺少)在線56上的參數列表後。 – Dean