无法在angular-google-maps中动态传递地图样式

时间:2015-04-07 08:58:17

标签: javascript angularjs google-maps angular-google-maps

我有一个问题。 我从服务中动态获取样式。样式是数组并检查内联添加时是否正常但是当我动态获取数据时,地图会呈现默认样式。

例如,这是我的代码:

 var styleArray = data.settings.Theme.mapSelected;
 if(data.settings.Theme.mapSelected != undefined) {
    $scope.mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      styles: styleArray
    };
 } else {
    $scope.mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
                    };
                  }

这是我的HTML

<ui-gmap-google-map center='settings.Location.coords' zoom='12' options='mapOptions' doRebuildAll="true">
    <ui-gmap-marker idKey='settings.Content._id' coords='settings.marker.coords'></ui-gmap-marker>
</ui-gmap-google-map>

我正确查看数据,因为我在登录控制台时可以在检查器中看到,但地图未呈现所选样式数组,但谷歌默认为。

有什么想法吗?

ps:if else语句正常工作,并且所有选项以及样式数组都不是。

更新:如果我传递动态样式数组内联它可以工作,只有变量它没有。我试着直接传递数据(data.settings.Theme.mapSelected),但它做了一些事情。

Plnkr:http://plnkr.co/edit/KtvcIoqTaa9HHG5Xc1E6?p=preview

1 个答案:

答案 0 :(得分:0)

那很简单......

由于数据是json angular无法正确呈现信息,因此简单的解决方案是使用 angular.fromJson() 来隐藏数据。

因此,更正只是编辑导入的数据,如下所示:

var styleArray = angular.fromJson(data.settings.Theme.mapSelected);

它会起作用。