入力タイプ= "範囲"を使用して円のGoogleマップの半径を変更

Question

私は入力タイプ= "範囲"を使用して半径の値を動的に更新しようとしています。マーカー、中心、円、デフォルト半径を取得しました。 入力タイプ= "range"の値を使用して半径の値を更新するにはどうすればよいですか？誰もがpls！

<input type="range" min="100" max="500" name="userlevelofsurfing" ng-model="data.levelvalue" ng change="setLevelText()"> 
    {{data.levelvalue }}m 


    var mrgdata='http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lang+'&sensor=true' 
       $http.get(mrgdata).success(function (response) { 


        var myLatlng = new google.maps.LatLng(lat,lang); 

        var mapOptions = { 
         center: myLatlng, 
         zoom: 16, 
         mapTypeId: google.maps.MapTypeId.ROADMAP, 


        }; 

        var map = new google.maps.Map(document.getElementById("map"), mapOptions); 


        $scope.data = { 
          levelvalue: 100, 
          level1wordDescription: "INTERMEDIATE+", 
          testvariable: 100 
        } 

        $scope.setLevelText = function() { 
          console.log('range value has changed to :'+$scope.data.levelvalue); 
          $scope.data.testvariable = $scope.data.levelvalue; 

        } 



        circle = new google.maps.Circle({ 
          map   : map, 
          center  : myLatlng, 
          radius  : $scope.data.testvariable, 
          //editable: true, 
          strokeColor : '#FF0099', 
          strokeOpacity : 1, 
          strokeWeight : 2, 
          fillColor  : '#009ee0', 
          fillOpacity : 0.2 
        }); 

        var marker = new google.maps.Marker({ 
          position: myLatlng, 
          map: map, 
          title: 'Current Location' 
        }); 

        $scope.map = map; 


       }).error(function (data, status, headers, config) { 
        console.log("error"); 



       }); 

Answer 1

あなたは値が変更されたときの機能を発射する入力にng-changeプロパティを使用することができます。

新しい半径とする円を更新するために、あなたのコントローラでこれを設定

<input 
    type="range" 
    min="1" 
    max="601" 
    step="100" 
    ng-change="updateCircleRadius(radius)" 
    ng-model="radius" 
> 

と使用：

$scope.updateCircleRadius = function(val) { 
    circle.setRadius(Number(val)) 
} 

Live demo.