angular-google-map angular 使用范围滑块设置半径

Question

我尝试创建一个带有范围滑块（使用 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>

这段代码给出了当我改变滑块值时：

第一次 => radius_changed 没有被触发
第二次 => radius_changed 在 sliderChange

在console.log中：

-- 我把值设为20 --

滑块值已更改：20

-- 我将值设置为 30 --

圆半径radius_changed：20000

滑块值已更改：30

-- 我将值设置为 40 --

圆半径radius_changed: 30000

滑块值已更改：40

有什么想法吗？

备注：如果我调整 window 的大小，事件 radius_changed 被触发并且圆得到正确的半径

Answer 1

终于，我找到了怎么回事。我的问题是 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();
        });

Answer 2

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);
                                });
                            });

                        }
                    }

angular-google-map angular 使用范围滑块设置半径

angular-google-map angular set radius with range slider

javascript

google-maps

angularjs

angular-google-maps