Question

我使用输入元素的值作为谷歌地图圆的半径的度量。我希望input元素的值每秒增加，并立即使用该值作为圆的半径。我有点能做到这一点，但我必须自己改变价值才能发挥作用。我希望圆的半径自动增加。

这是我的代码：

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

Answer 1

只需在输入和输入上更新圈子间隔。

＆＃13;

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

＆＃13;

我自动增加输入元素的值。我想获得价值

1 个答案: