Fatal编程技术网
  • javascript/
  • Javascript 刷新Google Maps API V3层

Javascript 刷新Google Maps API V3层

javascript html google-maps

Javascript 刷新Google Maps API V3层,javascript,html,google-maps,Javascript,Html,Google Maps,我一直很难让谷歌地图API v3正确更新。我有一个javascript计时器正在运行，应该定期刷新流量层，但我没有看到它发生 根据我对文档的理解，我应该能够说“layer.setMap（null）；”然后是“layer.setMap（map）；”来刷新层（源代码：） 我知道正在下载新的地图分幅（例如，我可以在Chrome开发工具的参考资料部分看到它们），但浏览器没有呈现它们。我可能遗漏了一些基本的东西 我尝试了几件事，包括： 使用元标记禁用缓存： 使用清单文件： 禁用Chrome浏览器缓存（同

我一直很难让谷歌地图API v3正确更新。我有一个javascript计时器正在运行，应该定期刷新流量层，但我没有看到它发生

根据我对文档的理解，我应该能够说“layer.setMap（null）；”然后是“layer.setMap（map）；”来刷新层（源代码：）

我知道正在下载新的地图分幅（例如，我可以在Chrome开发工具的参考资料部分看到它们），但浏览器没有呈现它们。我可能遗漏了一些基本的东西

我尝试了几件事，包括：

  • 使用元标记禁用缓存：
  • 使用清单文件：
  • 禁用Chrome浏览器缓存（同时保持开发工具打开）：
  • 触发另一个事件以刷新图层：
  • 在每个计时器事件中完全重新初始化映射
是否有办法确保浏览器在不强制重新加载整个页面的情况下呈现新图像

下面是该页面的简化版本（基于来自的答案）


地图测试
var映射，
交通层，
mapTimerHandle；
$（函数（）{
initMap（）；
mapTimerHandle=setInterval（refreshMap，15000）；
});
函数refreshMap（）{
trafficLayer.setMap（空）；
trafficLayer.setMap（地图）；
}
函数initMap（）{
var mapDiv=document.getElementById（'map'）；
map=newgoogle.maps.map（mapDiv，{zoom:15，center:newgoogle.maps.LatLng（40.7127，-74.0059）}）；
trafficLayer=new google.maps.trafficLayer（）；
trafficLayer.setMap（地图）；
}
我经常使用流量层。我添加了一个按钮来切换图层，但发现要隐藏它，我必须将图层本身设置为空

显示图层的我的代码：

if (MapManager.trafficLayer == null)
{
      MapManager.trafficLayer = new google.maps.TrafficLayer();
}
MapManager.trafficLayer.setMap(MapManager.map);
然后，要再次转到并隐藏图层，请执行以下操作：

MapManager.trafficLayer.setMap(null);
MapManager.trafficLayer = null;
从理想的角度来看，你上面的建议会更好，但对我来说，这似乎很好。

你刷新图层的方式很好

以下是经过编辑的代码以证明这一点：

<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;          
        var vis = false;

        $(function ()
        {
            initMap();            
        });

        function refreshMap()
        {               
            if (vis)            
            {
                trafficLayer.setMap(null)
                vis = false;
            }
            else
            {
                trafficLayer.setMap(map);
                vis = true;
            }            
        }

        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);
            vis = true;
            setInterval(function ()
            {
                refreshMap();
            }, 3000);
        }
    </script>
</head>
<body style="margin:0px;">
    <div id="map" style="width:100%; height:100%;"></div>
</body>


地图测试
var映射，流量层；
var-vis=假；
$（函数（）
{
initMap（）；
});
函数refreshMap（）
{               
if（vis）
{
trafficLayer.setMap（空）
vis=假；
}
其他的
{
trafficLayer.setMap（地图）；
vis=真；
}            
}
函数initMap（）
{
var mapDiv=document.getElementById（'map'）；
map=newgoogle.maps.map（mapDiv，{zoom:15，center:newgoogle.maps.LatLng（40.7127，-74.0059）}）；
trafficLayer=new google.maps.trafficLayer（）；
trafficLayer.setMap（地图）；
vis=真；
setInterval（函数（）
{
refreshMap（）；
}, 3000);
}

我添加了一个可见性属性以每2秒切换一次图层。您将注意到它是如何打开和关闭的。因为你这样称呼它，我觉得它没有足够的时间刷新

我还在initMap函数中添加了第一次设置图层贴图后的间隔

希望有帮助

编辑。除此之外，在支持实时通信的情况下，在某些情况下，它基于历史数据，不会在短时间内刷新。但是流量数据是在每次请求时提取的，如文档中所述：

试试这个代码片段，这对您有帮助吗

函数init（）{
var映射，
交通层，
mapTimerHandle；
var mapDiv=document.getElementById（'map'）；
map=新的google.maps.map（mapDiv{
缩放：14，
中心：新google.maps.LatLng（40.7127，-74.0059）
});
trafficLayer=new google.maps.trafficLayer（）；
trafficLayer.setMap（地图）；
}
$（文档）.ready（函数（）{
init（）；
setInterval（函数（）{
google.maps.event.trigger（映射，'resize'）；
fitBounds（）；
}, 2000);
});



谷歌说：

Google Maps API允许您使用TrafficLayer对象向地图添加实时交通信息（如果支持）。提供请求发出时的交通信息

我相信您的
refreshMap（）
函数只会隐藏和显示流量层（通过
.setMap（）
方法），而不会实际获取更新的流量数据（如果有）

因此，唯一有效的方法是通过重新启动
TrafficLayer（）
对象来更新您的请求

编辑：
我已经监控了网络流量，没有发现新的请求。必须更改视图以强制获取新数据（例如，通过重新设置缩放）


函数refreshMap（）{
trafficLayer.setMap（空）；
trafficLayer=null；
map.setZoom（map.getZoom（））；//这会更新视图并强制请求新数据
setTimeout（函数（）{
trafficLayer=new google.maps.trafficLayer（）；
trafficLayer.setMap（地图）；
}, 100);
}


因此，使用上面更新的方法，下面的JS文件将从
https://maps.googleapis.com/maps/api/js/
：


viewportinfo服务。GetViewportInfo？1m6&1m2&1d40.67711350268867&2d-74.09477919619036&2m2&1d40.747903965754034&2d-73.91666125686464&2u15&4sen美国&5e0&6sm%40285000000&7b0&8e0&9b0&callback=\U xdc\UU e0qzs3&token=110512


包含流量数据的

<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;          
        var vis = false;

        $(function ()
        {
            initMap();            
        });

        function refreshMap()
        {               
            if (vis)            
            {
                trafficLayer.setMap(null)
                vis = false;
            }
            else
            {
                trafficLayer.setMap(map);
                vis = true;
            }            
        }

        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);
            vis = true;
            setInterval(function ()
            {
                refreshMap();
            }, 3000);
        }
    </script>
</head>
<body style="margin:0px;">
    <div id="map" style="width:100%; height:100%;"></div>
</body>



        google.maps.event.trigger(map, 'resize'); // Can't remember if really helps
        map.setZoom( map.getZoom() -1 );    
        map.setZoom( map.getZoom() +1 ); // It won't flicker or make the transition between zoom levels. GMap just ignore the zoom change but redraw the tiles :/



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);                                                   
        }               
    }
}   



....
if (/googleapis.com\/maps\/vt\?pb=/.test(src)) {
...



    constructor(){
         this.mapOptions =  {
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            mapTypeControl: false,
            streetViewControl: false,
            fullscreenControl: false
          }

         this.map = new google.maps.Map(
           this.mapElement.nativeElement,
           this.mapOptions
         );
         this.map.setCenter(this.latLng);
         this.map.setZoom(7);

         this.trafficLayer = new google.maps.TrafficLayer();
         // console.log(trafficLayer);
         this.trafficLayer.setMap(this.map);
        }



    // use this method to toggle traffic layer on the map. 
    trafficLayerOnMap() {
        if (this.isTrafficEnabled) {
          this.trafficLayer.setMap(null);
          this.isTrafficEnabled = false;
        } else {
          this.trafficLayer = new google.maps.TrafficLayer();
          this.trafficLayer.setMap(this.map);
          this.isTrafficEnabled = true;
        }
      }