Question

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

提前致谢。

Answer 1

Google在其网站上有很多示例：https://developers.google.com/maps/documentation/javascript/tutorial

您需要至少一个Web服务，各个位置才能提交其生产力状态，然后存储该数据。

然后，你可以

1）动态生成页面，将这些数据点拉入某个数组，并循环遍历数组，添加标记（并且，在添加每个标记的位置，您可能会选择使用自定义图标，具体取决于他们的生产力水平是，所以你有一个可视指标）

OR

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

您可能只需要连接到数据库，收集结果，将它们格式化为JSON或XML，然后回显结果。

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

1 个答案: