Angular Google Map 的自定义样式答案

【问题标题】：Custom style for Angular Google MapAngular Google Map 的自定义样式
【发布时间】：2015-02-11 20:16:12
【问题描述】：

我正在使用Angular UI 地图，但似乎找不到用于更改样式的选项的指令。 Googles documention 给出了一个使用 google 对象的示例。我为地图尝试了 getElementById，但这会导致 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 添加到范围内，没有改变任何东西，也没有导致任何错误。

【问题讨论】：

标签： javascript angularjs google-maps

【解决方案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
};

其他所有内容都可以与上面的代码保持一致。

【讨论】：