Javascript 谷歌地图API：刷新ImageMapType覆盖_Javascript_Google Maps_Google Maps Api 3

Javascript 谷歌地图API：刷新ImageMapType覆盖

javascript google-maps google-maps-api-3

Javascript 谷歌地图API：刷新ImageMapType覆盖,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在使用GoogleMapsJavaScriptAPI从一个tile服务器显示天气。磁贴服务器在以下位置可用：我正在使用ImageMapType显示该平铺服务器，并将其添加到谷歌地图的overlymaptypes： <!DOCTYPE html> <html> <head> <title>Map Test</title> <style type="text/css">

我正在使用GoogleMapsJavaScriptAPI从一个tile服务器显示天气。磁贴服务器在以下位置可用：

我正在使用

ImageMapType

显示该平铺服务器，并将其添加到谷歌地图的

overlymaptypes

：

<!DOCTYPE html>
<html>
    <head>
        <title>Map Test</title>
        <style type="text/css">
            html, body { height: 100%; margin: 0; padding: 0; }
            #map {
                width:90%;
                height: 90%;
                display:inline-block;
            }
        </style>
    </head>
<body>
<div id="map"></div>
<script type="text/javascript">

    var map;

    function initMap() {

        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(42.5, -95.5),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);


        var tileNEX = new google.maps.ImageMapType({
            getTileUrl: function(tile, zoom) {
                return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime(); 
            },
            tileSize: new google.maps.Size(256, 256),
            opacity:0.60,
            name : 'NEXRAD',
            isPng: true
        });

        map.overlayMapTypes.setAt("0",tileNEX);

        setInterval(function (){console.log("resize"); google.maps.event.trigger(map, 'resize');}, 60000);
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>


地图测试
html，正文{高度：100%；边距：0；填充：0；}
#地图{
宽度：90%；
身高：90%；
显示：内联块；
}
var映射；
函数initMap（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（42.5，-95.5），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
var tileNEX=new google.maps.ImageMapType({
getTileUrl:函数（平铺、缩放）{
返回“http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/“+zoom+”/“+tile.x+”/“+tile.y+”.png？”+（新日期（））.getTime（）；
},
tileSize:new google.maps.Size（256256），
不透明度：0.60，
名称：“NEXRAD”，
isPng：是的
});
map.OverlyMapTypes.setAt（“0”，tileNEX）；
setInterval（函数（）{console.log（“resize”）；google.maps.event.trigger（map，'resize'）；}，60000）；
}

这很好（将其复制到index.html并用浏览器打开查看），但现在我想每X分钟刷新一次天气覆盖图

磁贴服务器显示当前的天气数据，并且天气数据每5分钟更新一次。我希望我的天气数据自动刷新，以始终显示当前天气

我试着调用

google.maps.event.trigger（映射，'resize'）

告诉映射重新绘制自己（查看我的JavaScript中的最后一行），但这实际上并没有重新获取磁贴-它只是重新绘制已经获取的磁贴

我可以删除图层，重新创建它，然后再添加它，但当没有天气显示时，这会导致一个恼人的秒

我的下一个想法是在背景中创建另一个天气层，然后从第一层淡入第二层，但这似乎有些过分

是否有一个简单的

ImageMapType.refetchTiles（）

函数？

问题在于触发调整大小事件不会强制加载新的磁贴。（当您查看网络时，您将看到不会加载任何内容）

更改缩放将加载新的分幅：

function initMap() {

    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(42.5, -95.5),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);


    var tileNEX = new google.maps.ImageMapType({
        getTileUrl: function(tile, zoom) {
            //return if zoom is not an integer
            if(zoom%1)return null;

            return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime(); 
        },
        tileSize: new google.maps.Size(256, 256),
        opacity:0.60,
        name : 'NEXRAD',
        isPng: true
    });

    map.overlayMapTypes.setAt("0",tileNEX);

    setInterval(function (){
      //this will change the zoom of the map  
      map.setZoom(map.getZoom()+.000000000000001);
      //this will change the zoom again and load fresh tiles
      map.setZoom(Math.round(map.getZoom()));

      }, 60000);
}

但是，无论您尝试什么，这：在没有天气显示的情况下会导致恼人的秒数始终是您的问题，因为加载磁贴需要一些时间