在谷歌地图上绘制在线数据答案

【问题标题】：Ploting online data on google maps在谷歌地图上绘制在线数据
【发布时间】：2012-07-25 20:15:48
【问题描述】：

我正在寻找开发一个可以在地图上绘制客户活动的应用程序。客户是生产车间，分布在世界各地。我想在地图上绘制点并在运行时刷新它们，以便它可以反映客户的生产状态。请您推荐和演示或在谷歌地图或任何其他解决方案上看起来这样做。

提前致谢。

【问题讨论】：

标签： javascript jquery asp.net google-maps

【解决方案1】：

Google 在他们的网站上有很多例子：https://developers.google.com/maps/documentation/javascript/tutorial

您至少需要一项网络服务，各个地点都可以提交其生产力状态，然后存储该数据。

那么，你可以

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，然后回显结果。

【讨论】：