无法在角度 - 谷歌地图中动态地传递地图样式 [英] Cannot pass dynamically map style in 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 ： 风景， 造型器：[{ 饱和： -  100}，{ 亮度：65}，{ 能见度： 上}]}，{ 类型特征： POI，造型器：[{ 饱和 ： -  100}，{ 亮度 ：51}，{ 能见度 ： 简化 }]}，{ 类型特征 ： road.highway  造型器：[{饱和度 ： -  100}，{ 能见度 ： 简化 }]}，{ 类型特征 ： road.arterial， 造型器：[{ 饱和： -  100}，{ 亮度：30 }，{ 能见度： 上}]}，{ 类型特征： road.local， 造型器：[{ 饱和： -  100}，{ 亮度：40}，{能见度： 上 }]}，{ 类型特征 ： 运输  造型器：[{ 饱和： -  100}，{ 能见度： 简化}]}，{ 类型特征： administrative.province  造型器：[{ 可视性： 关}]}，{ 类型特征： 水， 的ElementType： 标签， 造型器：[{ 可视性：上 }，{ 亮度 ： -  25}，{ 饱和 ： -  100}]}，{ 类型特征 ： 水， 的ElementType： 几何， 造型器：[{ 色调 ： ＃FFFF00}，{ 轻 ：-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语句正常工作，并且所有选项以及只有样式数组不是。

更新：如果我通过内联的动态样式数组，吨。我tryid直接传递数据（data.settings.Theme.mapSelected），但它做了一些事情。

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

解决方案

那么这很简单......

由于数据是json angular未正确呈现的信息，所以简单的解决方案是使用 angular.fromJson（）来隐藏数据。。

所以修正只是像这样编辑导入的数据：

  var styleArray = angular.fromJson（data.settings.Theme.mapSelected）; 
  

它可以工作。

i have an issue. I'm getting styles dynamically from a services. Styles are arrays and check that all worked ok when added inline but when i'm getting the data dynamically the map renders the default styling.

For example here's my code:

 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}]}]
                    };
                  }

And here my 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>

I'm getting correctly the data as i can see in the inspector when i log into console but map is not rendering the selected style array but google's default.

Any ideas?

ps: the if else statement works correctly, and also all the options as well only style array is not.

update: if i pass the dynamic style array inline it works, only with variable it doesn't. i tryid to pass the data directly (data.settings.Theme.mapSelected) but it does the some thing.

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

解决方案

Well that was quite simple...

As the data was json angular wasn't render correctly the information, so the simple solution is to covert data with angular.fromJson().

So the correction is just edit the imported data like this:

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

And it will work.

这篇关于无法在角度 - 谷歌地图中动态地传递地图样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！