Angular Google Map的自定義樣式

Question

我正在使用Angular UI地圖，並且似乎無法找到用於更改樣式的選項的指令。 Googles documention給出了一個使用google對象的例子。 我試過getElementById地圖，但是這會導致ui對象的過多錯誤。

我的控制器有：

$scope.map = { center: { latitude: 42.99, longitude: -81.255 }, zoom: 14, bounds: {}}; 

雖然HTML是：在適當的代碼添加到style範圍

<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> 

簡單的嘗試，沒有改變任何東西，或導致任何錯誤。

Answer 1

添加樣式是非常簡單的只是將它們添加到您的控制器像這樣：

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

其他一切可以保持相同的代碼之上。