在google地图上绘制在线数据
我正在寻找开发一个可以在地图上绘制客户活动的应用程序。客户是生产车间，他们分布在世界各地。我想在地图上绘制点，并在运行时刷新它们，这样它就可以反映客户端的生产状态。您是否可以推荐和演示，或在谷歌地图或任何其他解决方案上看起来这样做。
提前谢谢。
回答 1
Stack Overflow用户
发布于 2012-07-26 04:29:35
谷歌在他们的网站上有很多例子：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);
?>您可能只需要连接到数据库，收集结果，将其格式化为JSON或XML，并回显结果。
https://stackoverflow.com/questions/11657908
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号