angular-google-map带有范围滑块的角度设定半径
我尝试让一个带有范围滑块的页面(使用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);
});
});
}
}
本文经用户投稿或网站收集转载,如有侵权请联系本站。