Javascript 在Google Maps infobubble中自动重新加载数据,无需页面刷新

Javascript 在Google Maps infobubble中自动重新加载数据,无需页面刷新,javascript,google-maps,Javascript,Google Maps,我目前正在从事一个项目,该项目有大约20个标记散布在美国各地。每个pin都有一个始终显示的对应infobubble(与infowindow不同)(无需单击标记即可显示infobubble) 我的问题是,整个项目的重点是获取最新的数据(来自每15秒吐出XML的外部站点)。理想情况下,我希望infobubbles的内容能够适当地“更新”,而不必刷新整个页面。这使您可以在地图重置为默认位置的情况下在地图上移动,并且总体上不那么刺耳。有什么办法吗 更新:我找到了此解决方案:(),但有几个问题: 1) 。

我目前正在从事一个项目,该项目有大约20个标记散布在美国各地。每个pin都有一个始终显示的对应infobubble(与infowindow不同)(无需单击标记即可显示infobubble)

我的问题是,整个项目的重点是获取最新的数据(来自每15秒吐出XML的外部站点)。理想情况下,我希望infobubbles的内容能够适当地“更新”,而不必刷新整个页面。这使您可以在地图重置为默认位置的情况下在地图上移动,并且总体上不那么刺耳。有什么办法吗

更新:我找到了此解决方案:(),但有几个问题:

1) 。他如何不断地让标记刷新?它们仅在10秒后更新一次。

2.)我可以将类似的逻辑应用于infobubble刷新吗?记住,我的标记是静态的,它只是需要更新的infobubble的内容。

我肯定会考虑缓存。特别是如果你得到的集合有更多的用户,每10秒发出一个AJAX请求很容易让你的服务器过载。但是,如果您想保持简单,可以每隔几分钟请求一次更新。缓存用户,将其生成到javascript代码中,比如users=newarray(user1,user2,…)。如果页面没有那么重要,你就不必一直更新它,因为大多数用户都会在一两分钟内导航离开。如果您有一个每隔几秒钟更改一次的长列表,那么您就有足够的时间不必使用AJAX进行更新,只需依赖服务器生成的用户列表即可

如果没有,请将上次更新列表的时间存储在变量中,并在通过AJAX进行更新时将时间作为参数发送给服务器,然后让服务器快速检查添加了哪些新用户,并仅发送这些用户。然后,只需将新服务器的新阵列与旧阵列合并。不过,我强烈建议不要每10秒钟打一次电话给一个新名字。您不仅可以在服务器上运行更多的带宽,还可以在服务器必须为您找到列表中的下一个用户并向您发送该用户时提高CPU使用率。为了获得良好的实践效果,始终让客户尽可能多地完成工作,而不会出现延迟。只有一台服务器,但有更多的客户端。您转移到客户机的每个操作都将为服务器保存数百个(如果不是数千个)操作

至于长轮询vs setInterval,在这种情况下我建议使用setInterval。您至少可以发送一个带有时间参数的请求,指定上次更新时间,因此只需要发送一小部分,而不是整个数据数组

  • 通过
    setTimeout

  • 您将需要标记的一些不同属性。因为它们是静态的,所以这个独特的属性可能就是位置

  • 创建存储标记的对象,并将标记位置的字符串表示形式用作关键点

    要获取XML,您当然可以使用AJAX(当XML来自不同的域时,它们必须发送适当的
    访问控制允许源文件
    -头,或者您必须在自己的服务器上使用服务器端代理脚本来转发XML)

    要更新内容,请使用infoBubble的
    setContent()
    -方法(使用所需内容作为第一个函数参数)

    注意:当infoBubble已经打开时,您必须调用infoBubble的方法
    updateContent\(
    ),否则下次打开infoBubble时内容将被更新。您可以使用方法
    isOpen()
    检查信息气泡是否已打开


    示例实现:

    请求XML的函数:

      function downloadUrl(url,//URL of the XML-file
                          callback,//function 2 execute
                          map//the map
                          ) {
    
          var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') 
                                             : new XMLHttpRequest;
    
          request.onreadystatechange = function () {
              if (request.readyState == 4) {
                  request.onreadystatechange = function () {};
                  callback(request, request.status, url, map, callback);
              }
          };
    
          request.open('GET', url, true);
          request.send(null);
      }
    
    处理响应的函数(用作上述函数的
    回调
    -参数)。不清楚xml是什么样子的,该函数需要以下内容(您可能必须根据给定的xml对其进行修改):

    • 包含每个标记/气泡属性的项具有节点名
      事件
    • 纬度存储在items属性
      lat
    • 经度存储在items属性
      lng
    • 事件的标题/说明/内容存储在items属性
      name
    • 内容将是项目的文本内容 e、 g

    示例XML:

    <events>
       <event lat="41.8781136" lng="-87.629798" name="Bulls vs. Mavericks">1:0</event>
    </events>
    
    演示:

    • 演示只需将内容设置为当前时间,但内容将通过AJAX检索

    • 您将看到标记/气泡有时会消失,当地图中存在更新的XML中不存在的标记/气泡时,就会发生这种情况(脚本将删除它们)


    代理脚本的示例:

    <?php
     $url='http://external.service.com/path/to/the.xml';
     header('Content-Type:text/xml');
     die(file_get_contents($url));
    ?>
    
    
    
    请发布一个XML示例我当前使用的XML与体育赛事相关,因此在游戏开始之前数据不会自动刷新。请在链接的答案中查找
    ticker:null、//setTimeout reference
    setTimeout
    。对于
    延迟:10000,//(毫秒)连续获取之间的间隔,我仍然不理解。我是否会将ticker设置为X,其中X是我希望页面刷新的次数?您是否可以更详细地了解在我自己的服务器上使用服务器端代理脚本转发XML需要什么?例如,我是否需要另一台计算机,其唯一目的是从公共网站获取XML数据(不会设置访问控制允许源标题),以便从那里获取数据?您需要能够运行服务器端脚本,这是唯一的要求。这个脚本是
    
    downloadUrl('path/to/file.xml',
                 xhrCallback,//function from above 
                 map//your google.maps.Map
                );
    
    <?php
     $url='http://external.service.com/path/to/the.xml';
     header('Content-Type:text/xml');
     die(file_get_contents($url));
    ?>