Question

我正在尝试使用input type =“range”动态更新radius的值。我得到了我的标记，中心，圆和默认半径。如何使用input type =“range”的值更新半径值。任何人请!!

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

使用input type =“range”更改Circle google地图的半径

1 个答案: