谷歌地图：透明多边形答案

【问题标题】：Google Maps: Transparent Polygons谷歌地图：透明多边形
【发布时间】：2013-08-05 15:51:04
【问题描述】：

我有一张包含一组彩色多边形的地图。有时我想将每个多边形的填充颜色从它的任何内容更改为透明。我有以下代码：

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

如何将 fillColor 设置为透明？是否有特定的十六进制值？

【问题讨论】：

标签： javascript google-maps colors polygons

【解决方案1】：

google.maps.PolygonOptions.fillColor 只是一种颜色，没有“透明”颜色，它是一个不透明度值（0.0 表示完全透明，1.0 表示完全不透明）。

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

更新：0.0 现在似乎适用于透明多边形 (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>

【讨论】：