ng-map動態改變形狀的顏色

我使用NgMap和angular 1來顯示谷歌地圖，並在其上繪製各種形狀。我試圖通過改變一個範圍變量動態地改變形狀的顏色。ng-map動態改變形狀的顏色

在模板中，我有：

<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有可能嗎？這是一個錯誤嗎？

謝謝！

來源

2016-09-23 nagyf

沒有錯誤在你的代碼，填充顏色屬性正在改變。但它沒有被改變，因爲它不是一個CSS屬性。填充顏色用作配置attritube。 –

好的，謝謝，那麼它不是最好的api。它應該是一致的，要麼所有參數都應該提供實時綁定，或者不提供任何綁定。（例如，綁定位置或半徑工作） – nagyf

這可能是可能的，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="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
 
<script data-require="[email protected]*" 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>

來源

2016-09-23 13:05:49

我接受了您的答案，但在我的應用程序中我選擇了不同的解決方案。我使用'NgMap.getMap（...）'獲得地圖實例，並在地圖實例的形狀數組中找到具有正確ID的圓形實例，並調用'circle.set（'fill-color'，'＃ FF0000'）;'在實例上。 – nagyf

nagyf的解決方案可替代的方式：

NgMap.getMap().then(map=>{map.shapes.circle.set('fillColor', '#FF0000')})

Plunker：https://plnkr.co/edit/8m0gU1wqUETR8IjDoqvc?p=preview

來源

2017-02-16 21:32:26 nwm

ng-map動態改變形狀的顏色

回答

相關問題