刷新Google Maps API V3图层

曼德森

我一直无法让Google Maps API v3正确更新。我有一个正在运行的javascript计时器,该计时器应该定期刷新流量层,但是我没有看到它的发生。

据我了解的文档,我应该能够说出类似“ layer.setMap(null);”之类的东西。随后是“ layer.setMap(map);” 刷新图层(来源:https : //developers.google.com/maps/documentation/javascript/reference#TrafficLayer)。

我知道新的地图图块正在下载(例如,我可以在Chrome开发工具的“资源”部分中看到它们),但是浏览器没有在渲染它们。我可能缺少一些基本的东西。

我尝试了几件事,包括:

有没有一种方法可以确保浏览器在不强制重新加载整个页面的情况下呈现新图像?

以下是页面的简化版本(基于Google Maps刷新流量层的回答)。

<html>
    <head>
        <title>Map Testing</title>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script type="text/javascript">
            var map,
                trafficLayer,
                mapTimerHandle;

            $(function() {
                initMap();
                mapTimerHandle = setInterval(refreshMap, 15000);
            });

            function refreshMap() {
                trafficLayer.setMap(null);
                trafficLayer.setMap(map);
            }

            function initMap() {
                var mapDiv = document.getElementById('map');

                map = new google.maps.Map(mapDiv, {zoom: 15, center: new google.maps.LatLng(40.7127, -74.0059)});

                trafficLayer = new google.maps.TrafficLayer();

                trafficLayer.setMap(map);
            }
        </script>
    </head>
    <body style="margin:0px;">
        <div id="map" style="width:100%; height:100%;"></div>
    </body>
</html>
塞尔吉奥

好吧,我已经找到了,并且上面提到的那是什么trafficLayer.setMap(null)trafficLayer.setMap(map)-只是开关与绘制交通瓷砖瓷砖没有交通。另外map.setZoom(map.getZoom())(以及其他任何缩放比例)也不起作用,因为切片已经在缓存中,并且Google脚本甚至不尝试从服务器下载新的切片。

另外,似乎如果您只是打开Goog​​le地图并打开路况图层,它就不会刷新!真是脚,谷歌!

因此,我们必须找到另一种解决方法。

首先想到的是使用window.location.reload(true)wich将刷新图像缓存-我们看到了它的工作原理。不过,这不是一个好方法-重新加载整个页面花费的时间太长。如何重新加载图像?我们试试吧!

function reloadTiles() {
    var tiles = $("#map-canvas").find("img");
    for (var i = 0; i < tiles.length; i++) {
        var src = $(tiles[i]).attr("src");
        if (/googleapis.com\/vt\?pb=/.test(src)) {              
            var new_src = src.split("&ts")[0] + '&ts=' + (new Date()).getTime();
            $(tiles[i]).attr("src", new_src);                                                   
        }               
    }
}   

我们每N秒调用一次此函数: setInterval(reloadTiles, 5000)

一些评论:

$("#map-canvas").find("img")-将从地图容器中抓取所有图像(map-canvas在我的情况下)。并非全部都是图块,因此我们需要将它们过滤掉-我注意到图块是从像这样的域加载的mts(digit).googleapis.com/vt?pb=(hella long param)其他地图图像是从加载的maps.gstatic.com

这样我们就可以得到平铺图像,添加伪参数并更改其src。利润!

顺便说一句,我发现交通真正改变实际时间-瓷砖可能是不同的每一秒。

编辑

哦,对不起,这是工作样本。这是一个白雪皑皑的莫斯科,交通繁忙:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章