谷歌地图：透明多边形

Question

I have a map that will contain a group of colored polygons. There are times I want to change the fill color of each poly from whatever it is to transparent. I have the following code:

polys[x].setOptions({
    fillColor: "#FFFFFF",
    fillOpacity: .01,  //This changes throughout the program      
    strokeColor: '#000000',
});

How can I set the fillColor to transparent? Is there a specific hex value?

Answer 1

The google.maps.PolygonOptions.fillColor is just that, a color, there is no "transparent" color, that is an Opacity value (0.0 is fully transparent, 1.0 if fully opaque).

fillColor   | string | The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity | number | The fill opacity between 0.0 and 1.0

Update: 0.0 seems to work now for transparent Polygons ( jsfiddle )

 if (window.attachEvent) { window.attachEvent('onload', initMap); } else if (window.addEventListener) { window.addEventListener('load', initMap, false); } else { document.addEventListener('load', initMap, false); } function initMap() { var latlng = new google.maps.LatLng(51.5001524, -0.1262362); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title: 'Westminster, London, UK' }); var boundCoords = [ new google.maps.LatLng(51.3493528, -0.378358), new google.maps.LatLng(51.7040647, 0.1502295), new google.maps.LatLng(51.5001524, -0.1262362) ]; var boundCoords2 = [ new google.maps.LatLng(51.3493528, -0.378358), new google.maps.LatLng(51.7040647, 0.1502295), new google.maps.LatLng(51.6001524, -0.1262362) ]; var poly = new google.maps.Polygon({ paths: boundCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 3, fillColor: '#FF0000', fillOpacity: 0.35 }); poly.setMap(map); console.log(poly); var poly2 = new google.maps.Polygon({ paths: boundCoords2, strokeColor: '#000000', strokeOpacity: 0.8, strokeWeight: 3, fillColor: '#FF0000', fillOpacity: 0.0 }); poly2.setMap(map); console.log(poly); }

 html, body, #map_canvas { height: 100%; width: 100%; padding: 0; margin: 0; }

 <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas"></div>