Javascript Timeout-Funktion mit Google Maps API Polygone

Ich versuche derzeit, ein Programm zu erstellen, das die Opazität eines Polygons alle 2 Sekunden erhöht, bis es nicht transparent ist. Ich möchte dies schließlich mit mehreren Polygonen tun, um Daten an den Benutzer im Laufe der Zeit weiterzuleiten, aber ich versuche einfach, ein Polygon zum Funktionieren zu bringen. Der Code wird in Javascript geschrieben und verwendet die Timeout-Funktion dazu.Javascript Timeout-Funktion mit Google Maps API Polygone

Der Code soll ein rotes Quadrat eine Karte mit der Opazität 0,1 zeichnen, dann 2 Sekunden später ein ähnliches Quadrat mit der Opazität bei 0,2 zeichnen. Dieser Vorgang wird fortgesetzt, bis die Deckkraft gleich 1 ist. Das Problem besteht darin, dass das Programm die ersten 9 Quadrate überspringt (wobei Opazität < 1 ist) und das letzte Quadrat zeichnet (Opazität = 1). Ich glaube, dass es ein Problem mit meiner Verzögerung geben kann.

Unten ist mein Beispielcode:

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

Quelle

2017-01-29 EDCisBack

ich Ihren Code leicht modifiziert und implementiert es mit setInterval() Funktion. Beachten Sie auch, dass Sie keine neue Instanz eines Polygons innerhalb einer Schleife erstellen müssen. Sie können nur Polygonoptionen ändern.

Code-Schnipsel:

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>

Sie diese Probe auf jsbin sehen auch: http://jsbin.com/yepagec/edit?html,output

Quelle

2017-01-29 16:29:48 xomena

Wow! Danke, das hat funktioniert :). – EDCisBack

Javascript Timeout-Funktion mit Google Maps API Polygone

Antwort

Verwandte Themen