Question

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

代码应该在不透明度为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>

Answer 1

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

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用Google Maps API多边形的Javascript超时功能

1 个答案: