Kiểu tùy chỉnh cho Bản đồ Google góc cạnh

Question

Tôi đang sử dụng Angular UI bản đồ và không thể dường như tìm thấy chỉ thị cho tùy chọn thay đổi kiểu. Googles documention cho ví dụ về cách làm việc với đối tượng google. Tôi đã thử getElementById cho bản đồ, tuy nhiên dẫn đến rất nhiều lỗi với các đối tượng ui.

điều khiển của tôi có:

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

Trong khi HTML là:

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

đơn giản nỗ lực thêm style với mã phù hợp với phạm vi, didnt thay đổi bất cứ điều gì, hoặc gây ra bất kỳ lỗi nào.

Answer 1

Thêm phong cách thực sự đơn giản chỉ thêm chúng vào điều khiển của bạn như sau:

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

Mọi thứ khác có thể giữ nguyên như mã của bạn ở trên.