javascript google map circle radius_changed ,angularjs google map circle radius_changed

时间:2021-12-03 14:16:09

javascript:

var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: {lat: 41.878, lng: -87.629},
radius: 100000,
editable: true,
});

google.maps.event.addListener(cityCircle , 'radius_changed', function() {
console.log(cityCircle .getRadius());
});

angularjs:

html:

<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" events="c.events">
</ui-gmap-circle> js:
    {
id: 1,
center: {
latitude: lat,
longitude: lng
},
radius: radius,
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: true, // optional: defaults to false
visible: true, // optional: defaults to true
control: {},
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);
});
}); }
}
}
];
  1. Scope提供$apply方法传播Model的变化。
  2. 如果我们需要在一个新的执行序列中运行代码时才真正需要用到它,而且当且仅当这个新的执行序列不是被angular JS的库的方法创建的,这个时候我们需要将代码用scope.scope.apply()包起来。