angular-google-map带有范围滑块的角度设定半径

angular-google-map带有范围滑块的角度设定半径,第1张

我尝试让一个带有范围滑块的页面(使用https://github.com/danielcrisp/angular-rangeslider)来控制我的Google地图圈子的半径。 这是我的控制器的内容:

//range
        $scope.sliderValue = 10;
        $scope.center = {
            latitude: 51.1771171,
            longitude: 4.3532966
        };
        $scope.sliderChange = function() {
            console.log("slider value changed : "   $scope.sliderValue);
            //$scope.map.circle

            $scope.map.circle.radius = $scope.sliderValue * 1000;
        };
        //Map
        uiGmapGoogleMapApi.then(function (maps) {

            //$scope.uiMap = maps;
            //google.maps.event.trigger(this.map, 'resize');

            $scope.map = {
                center: $scope.center,
                zoom: 11,
                control: {}
            };

            $scope.map.circle = {
                id: 1,
                center: $scope.center,
                radius: 10000,
                stroke: {
                    color: '#08B21F',
                    weight: 2,
                    opacity: 1
                },
                fill: {
                    color: '#08B21F',
                    opacity: 0.5
                },
                geodesic: false, // optional: defaults to false
                draggable: false, // optional: defaults to false
                clickable: false, // optional: defaults to true
                editable: true, // optional: defaults to false
                visible: true, // optional: defaults to true
                events:{
                    radius_changed: function(){
                        //window.alert("circle radius radius_changed");
                        console.log("circle radius radius_changed: "   $scope.map.circle.radius);


                    }
                }
            };

        });

我的html模板:

<div class="col-md-4">
            <div range-slider on-handle-up="sliderChange()" min="10" max="200" model-max="sliderValue" step="10" pin-handle="min"></div>
</div>
<div class="col-md-8">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control">
        <ui-gmap-circle center="map.circle.center"
                        radius="map.circle.radius"
                        fill="map.circle.fill"
                        stroke="map.circle.stroke"
                        clickable="map.circle.clickable"
                        draggable="map.circle.draggable"
                        editable="map.circle.editable"
                        visible="map.circle.visible"
                        events="map.circle.events">
        </ui-gmap-circle>
    </ui-gmap-google-map>
</div>
</div>

当我更改滑块值时,此代码给出了:

  • 第一次=&gt; radius_changed未被触发

  • 第二次=&gt; radius_changed在sliderChange

  • 之前触发

在console.log中:

- 我将值设置为20 -

滑块值已更改:20

- 我将值设置为30 -

圆弧半径radius_changed:20000

滑块值已更改:30

- 我将值设置为40 -

圆弧半径radius_changed:30000

滑块值已更改:40

有什么想法吗?

备注:如果我调整窗口大小,则会触发事件radius_changed并且圆圈获得正确的半径

最佳答案:

2 个答案:

答案 0 :(得分:2)

最后,我发现了正在发生的事情。 我的问题是sliderValue的更改不会影响范围。

所以我删除了我的指令范围滑块上的html中的on-handle-up并添加了$ watch 有关详细信息,请参阅How do I use $scope.$watch and $scope.$apply in AngularJS?。

所以这是我的代码:

$scope.sliderChange = function() {
            console.log("slider value changed : "   $scope.sliderValue);
            //$scope.map.circle
            if ($scope.map !== undefined) {
                $scope.map.circle.radius = $scope.sliderValue * 1000;
            }
        };
        $scope.$watch('sliderValue', function () {
            $scope.sliderChange();
        });

答案 1 :(得分:0)

events:{
                        radius_changed: function(){
                            $timeout(function(){
                                $scope.$apply(function(){
                                    //console.log("circle radius radius_changed: "   $scope.circles[0].radius);
                                    $rootScope.$broadcast('LSN_BIND_RADIUS_DATA', $scope.circles[0].radius);
                                });
                            });

                        }
                    }

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复