javascript - 谷歌地图、SQL、XML、Ajax 天哪!

标签 javascript sql ajax google-maps

关于 Google map 、AJAX 和一些后端数据的快速问题。

我将如何创建使用我存储在数据库中的信息“实时”更新的谷歌地图?

我认为它在我脑海中运作的方式是。

数据库从用户那里收集带有地理标记的条目。 脚本(可能是 php)检索最新记录。 Javascript + AJAX 获取响应并将其绘制到 Google map 上。

如何让它在输入记录时刷新和更新?

最佳答案

您需要服务器上的脚本,给定时间戳将检查在该时间戳之后是否有新记录插入数据库。如果是,它应该返回包含最新条目的响应。

在客户端,您应该使用上次更新的时间戳参数向服务器端脚本发起 AJAX 请求,使用正常或长轮询。

当您的 AJAX 请求收到新信息时,您只需在 map 上移动您的标记即可。然后使用更新的时间戳参数发起一个新的 AJAX 请求。

使用 jQuery 的伪示例:

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

function autoUpdate() {
    $.ajax({
       type: "GET",
       url: "check_updates.php?last_update=" + lastUpdate,
       dataType: 'json',
       success: function(jsonData) {

          // 1. Check if jsonData is empty. If not we received some fresh data.
          // 2. Update lastUpdate from the jsonData 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);
       }
    });
}

关于javascript - 谷歌地图、SQL、XML、Ajax 天哪!,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2239503/

相关文章:

c# - 日期时间格式不正确?

php - 使用 ajax 提交数据时检测到 CSRF 攻击

php - 我们如何在 JQuery Append 函数中运行 If else 语句?

sql - 在一个 select 语句中使用一个 where 子句可以有多个链接服务器吗?

javascript - 如果元素的文本与其他元素文本不匹配,如何删除该元素?

javascript - 模拟双击拖动结束 - jquery UI

javascript - Jquery:解析 div block 并添加 id(1,2,3,4,5)

mysql - 从一列中使用 SUM 和 GROUP BY 为另一列选择 MAX,没有子查询

javascript - 更新页面的一部分而不重新加载整个页面

javascript - 核心模块是否应该在 Angular2 中导入共享模块