php - 将数据库中的坐标绘制到谷歌地图中，​​不断检查新值

Question

我正在创建一个 map 应用程序，其中设备每 10 秒向 Web 数据库发送一次坐标。我已经在谷歌地图上绘制了它们。但问题是我需要每 5 秒重新加载一次 map 以加载新坐标。为此我可以使用 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>

Answer 1

如果你不想刷新整个 map ，你可以把你的初始化函数分成两个函数。例如，您可以使用一个名为 initializeMap() 的函数来完成在页面上显示 map 的部分，如下所示:

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() 应该像您在示例中对 initialize 所做的那样发送到 setTimeout()。这样，每次超时时只会完成 refreshMarker() 的操作。

不幸的是，我没有机会对此进行测试，因此我不确定您是否还需要清除 refreshMarker 函数中的旧标记。

如果有帮助请告诉我