入力要素の値をオートインクリメントしています。値を取得したい

入力要素の値をGoogleマップサークルの半径の測定値として使用しています。私は入力要素の値を1秒ごとに増加させて、その値を円の半径として直ちに使用します。私はこれをやり遂げることができましたが、それを働かせるためには自分自身で価値を変えなければなりません。円の半径を自動的に増やしたい両方の入力&間隔で入力要素の値をオートインクリメントしています。値を取得したい

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

出典

2017-06-11 Ibarrameade

だけ更新サークル：

は、ここに私のコードです。

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

出典

2017-06-11 22:20:38

それは働きました！どうもありがとうございました。 – Ibarrameade

入力要素の値をオートインクリメントしています。値を取得したい

答えて

関連する問題