0

クライアントのアクティビティを地図上にプロットできるアプリケーションの開発を探しています。クライアントは生産現場で、世界中に分散しています。クライアントの生産状況を反映できるように、マップ上にポイントをプロットし、実行時に更新したいと考えています。Googleマップまたはその他のソリューションでそれを推奨およびデモするか、それを行っているように見えますか.

前もって感謝します 。

4

1 に答える 1

1

Google のサイトには多くの例があります: https://developers.google.com/maps/documentation/javascript/tutorial

さまざまな場所が生産性ステータスを送信し、そのデータを保存できる Web サービスが少なくとも 1 つ必要です。

次に、次のことができます。

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 秒ごと (行) に so_septa_data.php を呼び出していることがわかります。setTimeoutそのファイルは次のとおりです。

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

おそらく、データベースに接続し、結果を収集し、JSON または XML にフォーマットし、結果をエコーするだけで構成されます。

于 2012-07-25T20:29:34.510 に答える