[英]Dynamically set the radius of a circle on AngularUI google maps
As the title suggests I want to dynamically change the radius of the circle on my ui-gmap-google-map
element, I've tried to use an onChange function on the textbox asking for a radius like so: 正如标题所示,我想在
ui-gmap-google-map
元素上动态更改圆的半径,我尝试在文本框上使用onChange函数,要求这样的半径:
The HTML 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" />
In my Controller 在我的控制器中
$scope.setRadius = function() {
$scope.circles.radius = $scope.map.marker.circle.radius * 1000;
}
I also tried to directly change it in the "circles" array, but again, no result. 我也尝试直接在“圆形”数组中更改它,但同样没有结果。
The circles array 圆数组
$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: {}
}
];
The function to change radius 改变半径的功能
$scope.setRadius = function() {
$scope.circleRadius = $scope.map.marker.circle.radius * 1000;
}
The HTML for the map 地图的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>
I have simply fixed this by setting the radius directly in the circles array (I don't feel like this is the best practise, but it works. 我只是简单地通过直接在circles数组中设置半径来解决此问题(我不认为这是最好的做法,但确实可行。
To clarify: When the distance gets changed I call the setRadius()
function and simply set the radius by calling $scope.circles[0].radius
which sets the radius. 需要说明的是:当距离改变时,我调用
setRadius()
函数并通过调用$scope.circles[0].radius
设置半径来简单地设置半径。
Nothing else needed 不用了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.