在Google地圖上繪製在線數據

我正在尋找開發可以在地圖上繪製客戶活動的應用程序。客戶是生產車間，他們分佈在世界各地。我想繪製地圖上的點並在運行時進行刷新，以便反映客戶的生產狀態。您能否推薦並演示或在Google地圖或任何其他解決方案上看起來如此。在Google地圖上繪製在線數據

在此先感謝。

來源

2012-07-25 Wasim

谷歌有很多的在其網站上的例子：https://developers.google.com/maps/documentation/javascript/tutorial

你需要至少一個web服務的各個位置就可以提交他們的生產力狀況，然後存儲這些數據。

然後，你可以

1）動態生成的頁面，拉動這些數據點到一些數組，循環數組，添加標記（並在每添加一個標記點，你可能會選擇使用自定義圖標取決於他們的生產力水平是什麼，讓你有一個視覺指示器）

2）使可查詢另一個Web服務，並給予迴應。通過這種方式，你可以有頁面定期清除它的標記，請求新數據，並繪製它們，讓你有一個自我更新的儀表板

這裏是做類似的東西（不包括自定義標記圖標）的樣本頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>SEPTA Route Map</title> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<style> 
#wrap {width:960px;margin-right:auto;margin-left:auto;position:relative;} 
#map_canvas {width:100%;height:700px;} 
</style> 
</head> 

<body> 
<div id="wrap"> 
<div id="map_canvas"></div> 
</div> 
</body> 
<script type="text/javascript"> 
var myOptions = { 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions); 
var markers=new Array(); 
var first=0; 
update(); 

function update(){ 
    var bounds2 = new google.maps.LatLngBounds(); 
    var xmlhttp; 
    xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")); 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      res=JSON.parse(xmlhttp.responseText); 
      //clear existing markers 
      for (x=0;x<markers.length;x++) { 
       markers[x].setMap(null); 
      } 
      markers=new Array(); 
      //draw new markers 
      for(i=0;i<res['bus'].length;i++){ 
       var a=new Object(); 
       a.lat=res.bus[i]['lat']; 
       a.lng=res.bus[i]['lng']; 
       var point=new google.maps.LatLng(a.lat,a.lng); 
       bounds2.extend(point); 
       var marker = new google.maps.Marker({position: point,map: map}); 
       markers.push(marker); 
      } 
      if(first==0){ 
       map.fitBounds(bounds2); 
       first++; 
      } 
      setTimeout(update,2000); 

     } 
    } 
    xmlhttp.open("GET","so_septa_data.php",true); 
    xmlhttp.send(); 
} 

</script> 
</html>

你會看到，它調用每2秒（setTimeout線） so_septa_data.php和文件僅僅是：

<?php 
$route=(isset($_REQUEST['route']))?$_REQUEST['route']:23; 
echo file_get_contents("http://www3.septa.org/transitview/bus_route_data/".$route); 
?>

此致將可能包括剛剛連接到您的DAT收集結果，將它們格式化爲JSON或XML，並回顯結果。

來源

2012-07-25 20:29:34

在Google地圖上繪製在線數據

回答

相關問題