Angular Google Map的自定义样式
Custom style for Angular Google Map
我正在使用Angular UI映射,似乎找不到更改样式的选项的指令。谷歌文档给出了一个使用谷歌对象的例子。我尝试过为映射获取ElementById,但是这导致了ui对象的大量错误。
我的控制器有:
$scope.map = { center: { latitude: 42.99, longitude: -81.255 }, zoom: 14, bounds: {}};
而HTML是:
<div id="map_canvas">
<ui-gmap-google-map id='customMap' center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
<ui-gmap-markers models="eventMarkers" coords="'self'" idKey="'id'" icon="'icon'" click="'onClick'">
<ui-gmap-windows show="show">
<div ng-non-bindable>{{content}}</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
简单地尝试将带有适当代码的style
添加到作用域中,没有更改任何内容,也没有导致任何错误。
添加样式非常简单,只需将它们添加到控制器中即可:
var styleArray = [ //any style array defined in the google documentation you linked
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{ hue: "#00ffee" },
{ saturation: 50 }
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
$scope.options = {
styles: styleArray
};
其他一切都可以与上面的代码保持相同。
相关文章:
- CKEditor自定义样式下拉列表,带有预览但没有内联
- 使用css类将自定义样式应用于上下文按钮的Highcharts
- Fancybox的多个实例的自定义样式
- 具有自定义工具栏和自定义样式的CKEDITOR
- Angular Google Map的自定义样式
- 自定义/样式提示窗口
- 将自定义标记添加到自定义样式的 Google Maps API v3 for Wordpress 网站
- 将自定义样式的按钮添加到CKEditor
- TinyMCE 4自定义样式
- 谷歌地图API v3自定义样式地图和多个标记不显示
- 如何让用户保存自定义样式表设置
- 使用自定义样式从过滤器中剥离HTML标记
- 不能用React和Bootstrap创建自定义样式
- 编辑器自定义样式的img不显示在下拉列表中
- 自定义样式的Html5文件上传表单可以使用ie10触发提交按钮
- 没有应用TinyMCE自定义样式(尽管技术上可行)
- 复选框上的自定义样式不起作用
- Ckeditor强制自定义样式属性到特定的元素
- 自定义样式化UL/LI元素
- 自定义样式的复选框-我的JavaScript逻辑问题(一个else分支没有被击中)