在 AngularUI 谷歌地图上动态设置圆的半径答案

【问题标题】：Dynamically set the radius of a circle on AngularUI google maps在 AngularUI 谷歌地图上动态设置圆的半径
【发布时间】：2017-02-09 01:49:14
【问题描述】：

正如标题所示，我想动态更改 ui-gmap-google-map 元素上的圆的半径，我尝试在文本框上使用 onChange 函数来询问半径，如下所示：

HTML

<label for="distance" style="white-space: nowrap;">Enter a radius</label>
<input type="text" required class="form-control" placeholder="Kilometers" ng-change="setRadius()" name="distance" ng-model="map.marker.circle.radius" />

在我的控制器中

$scope.setRadius = function() {
    $scope.circles.radius = $scope.map.marker.circle.radius * 1000;
}

我也试过直接在“circles”数组中改，还是没有结果。

圆圈数组

$scope.circles = [
        {
            id: 1,
            center: {
                latitude: $scope.map.center.latitude,
                longitude: $scope.map.center.longitude
            },
            radius: $scope.circleRadius,
            stroke: {
                color: '#08B21F',
                weight: 2,
                opacity: 1
            },
            fill: {
                color: '#08B21F',
                opacity: 0.5
            },
            geodesic: true, // optional: defaults to false
            draggable: false, // optional: defaults to false
            clickable: false, // optional: defaults to true
            editable: false, // optional: defaults to false
            visible: true, // optional: defaults to true
            control: {}
        }
    ];

改变半径的功能

$scope.setRadius = function() {
    $scope.circleRadius = $scope.map.marker.circle.radius * 1000;
}

地图的 HTML

<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-window show="map.window.show" coords="map.window.model" options="map.window.options" closeclick="map.window.closeClick()">

</ui-gmap-window>

<ui-gmap-circle ng-repeat="c in circles track by c.id" center="c.center" stroke="c.stroke" fill="c.fill" radius="c.radius" visible="c.visible" geodesic="c.geodesic" editable="c.editable" draggable="c.draggable" clickable="c.clickable" control="c.control"></ui-gmap-circle>

【问题讨论】：

标签： javascript html angularjs google-maps

【解决方案1】：

我只是通过直接在圆数组中设置半径来解决这个问题（我不觉得这是最好的做法，但它有效。

澄清一下：当距离发生变化时，我调用setRadius() 函数并通过调用设置半径的$scope.circles[0].radius 简单地设置半径。

无需其他任何东西

【讨论】：