Ändern Sie den Radius von Circle google map mit dem Eingabetyp = "range"

Question

Ich versuche, den Wert des Radius dynamisch zu aktualisieren, indem Sie den Eingabetyp = "range" verwenden. Ich habe meinen Marker, Mittelpunkt, Kreis und Standardradius bekommen. Wie aktualisiere ich den Wert des Radius mit dem Wert des Eingabetyps = "Bereich". jemand bitte !!

<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

Sie können das ng-change Eigenschaft am Eingang eine Funktion ausgelöst, wenn sich der Wert ändert:

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

und verwenden Sie setzen diese in Ihrem Controller den Kreis mit dem neuen Radius aktualisieren:

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

Live demo.