作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
关于 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/
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档: https://leafletjs.cn/reference.html 官网(英文): ht
我是一名优秀的程序员,十分优秀!