将数据库中的坐标绘制到谷歌地图上,不断检查新值

Posted

技术标签:

【中文标题】将数据库中的坐标绘制到谷歌地图上,不断检查新值【英文标题】:Plot coordinates from database onto google maps, keep checking for new values 【发布时间】:2012-02-22 17:06:14 【问题描述】:

我正在创建一个地图应用程序,其中设备每 10 秒向 Web 数据库发送一次坐标。我已经在谷歌地图上绘制了它们。但问题是我需要每 5 秒重新加载一次地图以加载新的坐标。为此,我可以使用 setTimeout() javascript 函数。我不确定是否可以使用此查询来轮询最后插入的行。SELECT lat, lon FROM map ORDER BY id DESC LIMIT 1('id' 自动递增)。我知道可能会有更好的东西。任何帮助将不胜感激。谢谢。这是我目前的代码。

<?php $db = mysql_connect("localhost","root","qwerty");
 mysql_select_db("test", $db); ?>

<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() 
    var myLatlng = new google.maps.LatLng(37.386339,-122.085823);
    var myOptions = 
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    ;

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var WalkingPathCoordinates = [];
    <?php  $coordinates="SELECT * FROM map";
            $Result1 = mysql_query($coordinates, $db)or die(mysql_error());  
            while(list($id,$lat,$long) = mysql_fetch_row($Result1))
                 
                echo "var latlng = new google.maps.LatLng(".$lat.",".$long.")\n";
                echo "WalkingPathCoordinates.push(latlng);\n";
                
    ?> 
var WalkingPath = new google.maps.Polyline(
    path: WalkingPathCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
    );

WalkingPath.setMap(map);
  
</script>

【问题讨论】:

考虑这个方法:***.com/questions/2625556/… 谢谢!我刚刚添加了 setTimeout(initialize,10000);就在 WalkingPath.setMap(map) 上方;页面开始刷新。有什么方法可以只刷新标记而不刷新整个页面? 哇!等一下!在 Timeout 中调用 initialize fn 只会从缓存中取回页面!我们应该改用 location.reload(true) ! 【参考方案1】:

如果您不想刷新整个地图,您可以将您的初始化函数分成两个函数。例如,您可以有一个名为 initializeMap() 的函数,它负责在页面上显示地图的部分,如下所示:

var map

function initializeMap() 
    var myLatlng = new google.maps.LatLng(37.386339,-122.085823);
    var myOptions = 
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    ;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

另一个函数可以称为 refreshMarkers() 并执行与标记相关的工作。在 initializeMap() 函数外部声明 map 后,可以从 refreshMarkers() 函数访问它。

initializeMap() 函数应该只被调用一次,而 refreshMarker() 应该被发送到 setTimeout(),就像你在示例中对 initialize 所做的那样。这样,每次超时只会执行 refreshMarker() 操作。

很遗憾,我无法对此进行测试,因此我不确定您是否还需要擦除 refreshMarker 函数中的旧标记。

如果这有帮助,请告诉我

【讨论】:

是的!我正在尝试这个!会让你知道的!我认为使用 ajax 会更好!

以上是关于将数据库中的坐标绘制到谷歌地图上,不断检查新值的主要内容,如果未能解决你的问题,请参考以下文章

如何将点保存到谷歌地图

如何将图块添加到谷歌地图并为其设置动画,即不断用新图块替换它们

从 MySQL 数据库更新谷歌地图上“实时”标记的变化坐标

将远程 api json 数据显示到谷歌地图中

将 SQL 数据库中的经纬度加载到谷歌地图中

使折线水平显示在谷歌地图上并将其缩放到中心坐标