ng-map 动态改变形状的颜色
ng-map change the color of the shape dynamically
我正在使用 NgMap 和 angular 1 显示 google 地图,并在其上绘制各种形状。
我正在尝试通过更改范围变量来动态更改形状的颜色。
在我的模板中:
<shape id="circle" name="circle" fill-color='{{circle.color}}' stroke-color='{{circle.color}}' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
</shape>
然后在控制器中我创建了一个对象:
function CircleColorTestController($scope, $interval) {
$scope.circle = {
color: '#00FF00'
};
var colors = ['#FF0000', '#00FF00', '#0000FF'];
var i = 0;
$interval(function() {
$scope.circle.color = colors[i];
console.log('Changing color to: ' + $scope.circle.color);
++i;
if (i > 2) {
i = 0;
}
}, 1000);
}
看看这个 plunkr:
https://plnkr.co/edit/nx5i5h
圆圈的颜色应该每秒都在变化,但它仍然是绿色。
NgMap甚至有可能吗?这是一个错误吗?
谢谢!
可能 fill-color
不是 angularjs 指令,这就是它不提供与范围变量的实时绑定的原因。
这是创建您想要的功能的替代方法
angular.module('app', ['ngMap'])
.controller('CircleColorTestController', CircleColorTestController);
CircleColorTestController.$inject = ['$scope', '$interval'];
function CircleColorTestController($scope, $interval) {
$scope.circle = {
color: 'red'
};
var colors = ['#FF0000', '#00FF00', '#0000FF'];
var i = 0;
$interval(function() {
$scope.circle.visible = colors[i];
++i;
if (i > 2) {
i = 0;
}
}, 1000);
}
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="ng-map@*" data-semver="1.7.12" src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<link rel="stylesheet" href="style.css" />
<div ng-app="app" ng-controller="CircleColorTestController">
<div map-lazy-load="https://maps.google.com/maps/api/js">
<ng-map center="41,-87" zoom="11">
<shape id="circle" ng-if="circle.visible == '#FF0000'" name="circle" fill-color='#FF0000' stroke-color='#FF0000' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
</shape>
<shape id="circle" ng-if="circle.visible == '#0000FF'" name="circle" fill-color='#0000FF' stroke-color='#0000FF' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
</shape>
<shape id="circle" ng-if="circle.visible == '#00FF00'" name="circle" fill-color='#00FF00' stroke-color='#00FF00' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
</shape>
</ng-map>
</div>
</div>
nagyf 的解决方案有效:
NgMap.getMap().then(map=>{map.shapes.circle.set('fillColor', '#FF0000')})
我正在使用 NgMap 和 angular 1 显示 google 地图,并在其上绘制各种形状。 我正在尝试通过更改范围变量来动态更改形状的颜色。
在我的模板中:
<shape id="circle" name="circle" fill-color='{{circle.color}}' stroke-color='{{circle.color}}' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
</shape>
然后在控制器中我创建了一个对象:
function CircleColorTestController($scope, $interval) {
$scope.circle = {
color: '#00FF00'
};
var colors = ['#FF0000', '#00FF00', '#0000FF'];
var i = 0;
$interval(function() {
$scope.circle.color = colors[i];
console.log('Changing color to: ' + $scope.circle.color);
++i;
if (i > 2) {
i = 0;
}
}, 1000);
}
看看这个 plunkr: https://plnkr.co/edit/nx5i5h
圆圈的颜色应该每秒都在变化,但它仍然是绿色。 NgMap甚至有可能吗?这是一个错误吗?
谢谢!
可能 fill-color
不是 angularjs 指令,这就是它不提供与范围变量的实时绑定的原因。
这是创建您想要的功能的替代方法
angular.module('app', ['ngMap'])
.controller('CircleColorTestController', CircleColorTestController);
CircleColorTestController.$inject = ['$scope', '$interval'];
function CircleColorTestController($scope, $interval) {
$scope.circle = {
color: 'red'
};
var colors = ['#FF0000', '#00FF00', '#0000FF'];
var i = 0;
$interval(function() {
$scope.circle.visible = colors[i];
++i;
if (i > 2) {
i = 0;
}
}, 1000);
}
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="ng-map@*" data-semver="1.7.12" src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<link rel="stylesheet" href="style.css" />
<div ng-app="app" ng-controller="CircleColorTestController">
<div map-lazy-load="https://maps.google.com/maps/api/js">
<ng-map center="41,-87" zoom="11">
<shape id="circle" ng-if="circle.visible == '#FF0000'" name="circle" fill-color='#FF0000' stroke-color='#FF0000' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
</shape>
<shape id="circle" ng-if="circle.visible == '#0000FF'" name="circle" fill-color='#0000FF' stroke-color='#0000FF' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
</shape>
<shape id="circle" ng-if="circle.visible == '#00FF00'" name="circle" fill-color='#00FF00' stroke-color='#00FF00' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
</shape>
</ng-map>
</div>
</div>
nagyf 的解决方案有效:
NgMap.getMap().then(map=>{map.shapes.circle.set('fillColor', '#FF0000')})