无法在 angular-google-maps 中传递动态地图样式
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":"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>
当我登录控制台时,我正在正确获取数据,正如我在检查器中看到的那样,但地图未呈现所选样式数组,而是呈现 google 的默认值。
有什么想法吗?
ps: if else 语句工作正常,所有选项以及只有样式数组不工作。
更新:如果我内联传递动态样式数组,它就可以工作,但只有变量才行不通。我试着直接传递数据 (data.settings.Theme.mapSelected) 但它做了一些事情。
嗯,这很简单...
由于数据 json angular 没有正确呈现信息,所以简单的解决方案是用 angular.fromJson()[=21= 隐藏数据].
所以更正就是像这样编辑导入的数据:
var styleArray = angular.fromJson(data.settings.Theme.mapSelected);
它会起作用。
我有一个问题。 我从服务中动态获取样式。样式是数组,并检查在内联添加时是否一切正常,但当我动态获取数据时,地图呈现默认样式。
例如,这是我的代码:
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>
当我登录控制台时,我正在正确获取数据,正如我在检查器中看到的那样,但地图未呈现所选样式数组,而是呈现 google 的默认值。
有什么想法吗?
ps: if else 语句工作正常,所有选项以及只有样式数组不工作。
更新:如果我内联传递动态样式数组,它就可以工作,但只有变量才行不通。我试着直接传递数据 (data.settings.Theme.mapSelected) 但它做了一些事情。
嗯,这很简单...
由于数据 json angular 没有正确呈现信息,所以简单的解决方案是用 angular.fromJson()[=21= 隐藏数据].
所以更正就是像这样编辑导入的数据:
var styleArray = angular.fromJson(data.settings.Theme.mapSelected);
它会起作用。