使用Google Maps API多边形的Javascript超时函数_Javascript_Google Maps

使用Google Maps API多边形的Javascript超时函数

javascript google-maps

使用Google Maps API多边形的Javascript超时函数,javascript,google-maps,Javascript,Google Maps,我目前正在尝试创建一个程序，每2秒增加一个多边形的不透明度，直到它不透明为止。我最终想用多个多边形来传递数据给用户，但我只是想让一个多边形工作。代码是用Javascript编写的，并使用timeout函数来完成代码应该在地图上绘制一个不透明度为0.1的红色正方形，然后在2秒钟后绘制一个不透明度为0.2的类似正方形。此过程将继续，直到不透明度等于1。问题是程序跳过前9个正方形（不透明度

我目前正在尝试创建一个程序，每2秒增加一个多边形的不透明度，直到它不透明为止。我最终想用多个多边形来传递数据给用户，但我只是想让一个多边形工作。代码是用

Javascript

编写的，并使用timeout函数来完成

代码应该在地图上绘制一个不透明度为0.1的红色正方形，然后在2秒钟后绘制一个不透明度为0.2的类似正方形。此过程将继续，直到不透明度等于1。问题是程序跳过前9个正方形（不透明度<1）并绘制最后一个正方形（不透明度=1）。我相信我的延迟可能有问题

下面是我的示例代码：

<!DOCTYPE HTML>  

<html>
    <head>
        <style>
            #map {
                height: 100%;
            }
            #tabs{
                width: 100%;
            }      
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>      
        <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 11,
                center: {lat: 33.678, lng: -116.243},
                mapTypeId: 'terrain'
            });
            for(i = 0.1; i < 1; i+=0.1){
                setTimeout(function(){
                    var rectangle = new google.maps.Rectangle({
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: i,
                        map: map,
                        bounds: {
                        north: 33.685,
                        south: 33.671,
                        east: -116.234,
                        west: -116.251
                        }
                    });
                }, 1000+i*20000)
            }
        }
        </script> 
        <div id="map"></div>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
    </body>
</html>


#地图{
身高：100%；
}
#标签{
宽度：100%；
}      
html，正文{
身高：100%；
保证金：0；
填充：0；
}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：11，
中心：{lat:33.678，lng:-116.243}，
mapTypeId:'地形'
});
对于（i=0.1；i<1；i+=0.1）{
setTimeout（函数（）{
var rectangle=new google.maps.rectangle({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
我:我,，
地图：地图，
界限：{
北：33.685，
南：33.671，
东：-116.234，
西区：-116.251
}
});
}，1000+i*20000）
}
}

我稍微修改了您的代码，并用setInterval（）函数实现了它。另外请注意，不需要在循环中创建多边形的新实例，您只需更改多边形选项即可

代码片段：

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：11，
中心：{lat:33.678，lng:-116.243}，
mapTypeId:'地形'
});
var m_不透明度=0.1；
var rectangle=new google.maps.rectangle({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
fillOpacity:m_不透明度，
地图：地图，
界限：{
北：33.685，
南：33.671，
东：-116.234，
西区：-116.251
}
});
var m_timer=window.setInterval（函数（）{
m_不透明度+=0.1；
if（m_）不透明度