使用输入类型=“0”改变Circle谷歌地图的半径;“范围”;

Change the radius of Circle google map using input type="range"

本文关键字:范围 谷歌地图 Circle 输入 改变 类型      更新时间:2024-03-24

我正在尝试使用输入type="range"动态更新半径的值。我已经得到了我的标记,中心,圆和默认半径。如何使用输入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");

                });

当值发生变化时,可以在输入上使用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))
}

现场演示