Je suis auto-incrémenté de la valeur d'un élément en entrée. Je veux obtenir la valeur

J'utilise la valeur d'un élément d'entrée comme mesure du rayon d'un cercle Google Maps. Je veux que la valeur de l'élément d'entrée augmente chaque seconde et utilise immédiatement la valeur comme rayon du cercle. J'étais en quelque sorte capable de le faire mais je dois changer la valeur moi-même pour que cela fonctionne. Je veux que le rayon du cercle augmente automatiquement.Je suis auto-incrémenté de la valeur d'un élément en entrée. Je veux obtenir la valeur

Voici mon code:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #map { 
     height: 400px; 
     width: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <div id="datetime"> 
     Number: <input type="number" id="time" value="40"> 
    </div> 
    <script> 
     function timeInterval() { 
     setInterval(function(){ 
      document.getElementById("time").stepUp(10); 
     }, 1000); 
     } 
     window.onload = timeInterval; 

     function initMap() { 
     var annArbor = {lat: 42.271084, lng: -83.737277}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 16, 
      center: annArbor 
     }); 

     var circle = new google.maps.Circle({ 
          map   : map, 
          center  : annArbor, 
          radius  : parseInt(document.getElementById("time").value), 
          editable  : false, 
          strokeColor : '#FF0099', 
          strokeOpacity : 1, 
          strokeWeight : 2, 
          fillColor  : '#009ee0', 
          fillOpacity : 0.2 
         }); 
     var time = document.getElementById('time'); 
     time.addEventListener('input', function() { 
      circle.setRadius(parseInt(document.getElementById('time').value)); 
     }); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
    </script> 
    </body> 
</html>

Source

2017-06-11 Ibarrameade

cercle juste mise à jour à la fois sur l'entrée intervalle &.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 
     #map { 
 
     height: 400px; 
 
     width: 100%; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <div id="datetime"> 
 
     Number: <input type="number" id="time" value="40"> 
 
    </div> 
 
    <script> 
 
     function timeInterval() { 
 
     setInterval(function(){ 
 
      document.getElementById("time").stepUp(10); 
 
      setRadius() 
 
     }, 1000); 
 
     } 
 
     window.onload = timeInterval; 
 
     
 
     var circle; 
 
     
 
     function setRadius(){ 
 
     
 
     circle.setRadius(parseInt(document.getElementById('time').value)); 
 
     } 
 

 
     function initMap() { 
 
     var annArbor = {lat: 42.271084, lng: -83.737277}; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 16, 
 
      center: annArbor 
 
     }); 
 

 
     circle = new google.maps.Circle({ 
 
          map   : map, 
 
          center  : annArbor, 
 
          radius  : parseInt(document.getElementById("time").value), 
 
          editable  : false, 
 
          strokeColor : '#FF0099', 
 
          strokeOpacity : 1, 
 
          strokeWeight : 2, 
 
          fillColor  : '#009ee0', 
 
          fillOpacity : 0.2 
 
         }); 
 
     var time = document.getElementById('time'); 
 
     time.addEventListener('input', setRadius); 
 
     } 
 
    </script> 
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

Source

2017-06-11 22:20:38

Il a travaillé !. Merci beaucoup. – Ibarrameade

Je suis auto-incrémenté de la valeur d'un élément en entrée. Je veux obtenir la valeur

Répondre

Questions connexes