使用 php/mysql 在 googlemaps 上动态绘制折线

Posted 2023-02-24

【中文标题】使用 php/mysql 在 googlemaps 上动态绘制折线

【英文标题】：dynamically drawing polylines on googlemaps using php/mysql

【发布时间】：2011-01-27 05:31:31

【问题描述】：

我是 googlemaps API 的新手。我为我的手机编写了一个小应用程序，它会定期将其位置更新到 SQL 数据库。

我想在浏览器的 googlemap 上显示此信息。理想情况下，我想定期轮询数据库，如果有任何新的坐标到达，请将它们添加到行中。

描述它的最佳方式是this。

为了到达那里，我已经开始研究 google 上的文档并一直在修改它们以尝试实现我想要的。它不起作用 - 我不知道为什么。我希望得到一些关于原因的建议，并且非常欢迎任何指向我最终目标的指针。 谷歌地图 AJAX + mysql/php 示例

   <script type="text/javascript">
  //<![CDATA[

function load() 
  if (GBrowserIsCompatible()) 
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(47.614495, -122.341861), 13);

    GDownloadUrl("phpsqlajax_genxml.php", function(data) 
      var xml = GXml.parse(data);
      var line = [];
      var markers = xml.documentElement.getElementsByTagName("points");
        for (var i = 0; i < points.length; i++) 
            var point = points.item(i);
            var lat  = point.getAttribute("lat");
            var lng  = point.getAttribute("lng");

            var latlng = new GLatLng(lat, lng);

       line.push(latlng);
       if (point.firstChild) 
         var station = point.firstChild.nodeValue;
         var marker = createMarker(latlng, station);
         map.addOverlay(marker);
       
     

     var polyline = new GPolyline(line, "#ff0000", 3, 1);
     map.addOverlay(polyline);
);

//]]>

我的 php 文件正在生成以下 XML；

<?xml version="1.0" encoding="UTF-8" ?>
<points>
<point lng="-122.340141" lat="47.608940"/>
<point lng="-122.344391" lat="47.613590"/>
<point lng="-122.356445" lat="47.624561"/>
<point lng="-122.337654" lat="47.606365"/>
<point lng="-122.345673" lat="47.612823"/>
<point lng="-122.340363" lat="47.605961"/>
<point lng="-122.345467" lat="47.613976"/>
<point lng="-122.326584" lat="47.617214"/>
<point lng="-122.342834" lat="47.610126"/>
</points>

我已经成功地解决了这个问题； http://code.google.com/apis/maps/articles/phpsqlajax.html 在尝试自定义代码之前。

有什么建议吗？我哪里错了？

【参考方案1】：

你似乎走在正确的轨道上。

你的 php 脚本应该接受一个时间戳参数，并且应该检查在那个时间戳之后是否有新的点被插入到数据库中。如果是，它应该返回一个带有最新条目的响应（或该时间戳之后的条目列表，如果您想在车辆移动时显示实时轨迹）。

在客户端，您可能希望使用普通或long polling 使用上次更新的时间戳参数向服务器端脚本发起 AJAX 请求。

当您的 AJAX 请求从服务器接收到新信息时，您只需在地图上移动标记即可。然后使用更新的时间戳参数发起一个新的 AJAX 请求。

使用jQuery 的伪代码示例：

var lastUpdate = '2000/01/01 00:00:00';

function autoUpdate () 
    $.ajax(
       type: "GET",
       url: "phpsqlajax_genxml.php?last_update=" + lastUpdate,
       dataType: 'xml',
       success: function(xmlData) 

          // 1. Check if the xmlData is empty. If not we received 
          //    some fresh data.
          // 2. Update lastUpdate from the xmlData with the timestamp from 
          //    the server. Don't use JavaScript to update the timestamp, 
          //    because the time on the client and on the server will 
          //    never be exactly in sync.
          // 3. Move the markers on Google Map.

          // Relaunch the autoUpdate() function in 5 seconds.
          setTimeout(autoUpdate, 5000);
       
    );

【讨论】：

感谢您的回复。我现在已经让上面的代码工作了，我犯了一些粗心的错误，我只是看不到。 AJAX 对我来说是另一个新事物（在 web tbh 上不是这样），但会研究它并尝试应用你所说的。