带有 Google Maps API 多边形的 Javascript 超时功能答案

【问题标题】：Javascript Timeout function with Google Maps API Polygons带有 Google Maps API 多边形的 Javascript 超时功能
【发布时间】：2017-01-29 14:30:35
【问题描述】：

我目前正在尝试创建一个程序，该程序每 2 秒增加一次多边形的不透明度，直到其不透明为止。我最终想用多个多边形来做到这一点，以便随着时间的推移将数据中继给用户，但我只是想让一个多边形工作。该代码是用Javascript 编写的，并使用超时功能来执行此操作。

代码应该在不透明度为 0.1 的地图上绘制一个红色正方形，然后在 2 秒后绘制一个不透明度为 0.2 的类似正方形。这个过程一直持续到不透明度等于 1。问题是程序跳过了前 9 个正方形（其中不透明度

下面是我的示例代码：

<!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>

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

我稍微修改了您的代码并使用 setInterval() 函数实现了它。另请注意，无需在循环内创建新的多边形实例，您只需更改多边形选项即可。

代码 sn-p：

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: {lat: 33.678, lng: -116.243},
            mapTypeId: 'terrain'
        });
        var m_opacity = 0.1;
        var rectangle = new google.maps.Rectangle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: m_opacity,
          map: map,
          bounds: {
            north: 33.685,
            south: 33.671,
            east: -116.234,
            west: -116.251
          }
        });
        var m_timer = window.setInterval(function(){
          m_opacity += 0.1;
          if (m_opacity <= 1.0) {
            rectangle.setOptions({
              fillOpacity: m_opacity
            });
          }  
          if (m_opacity === 1.0) {
            window.clearInterval(m_timer);
          }
        }, 2000);
    }

#map {
            height: 100%;
        }
        #tabs{
            width: 100%;
        }      
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&v=3&libraries=places&callback=initMap"></script>

你也可以在 jsbin 上看到这个示例：http://jsbin.com/yepagec/edit?html,output

【讨论】：