我正在寻找开发可以在地图上绘制客户活动的应用程序。客户是生产车间,他们分布在世界各地。我想绘制地图上的点并在运行时进行刷新,以便反映客户的生产状态。 您能否推荐并演示或在Google地图或任何其他解决方案上看起来如此。在Google地图上绘制在线数据
在此先感谢。
我正在寻找开发可以在地图上绘制客户活动的应用程序。客户是生产车间,他们分布在世界各地。我想绘制地图上的点并在运行时进行刷新,以便反映客户的生产状态。 您能否推荐并演示或在Google地图或任何其他解决方案上看起来如此。在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);
?>
此致将可能包括刚刚连接到您的DAT收集结果,将它们格式化为JSON或XML,并回显结果。