Sta*_*hil 1 javascript google-maps colors polygons
我有一张包含一组彩色多边形的地图。有时我想将每个多边形的填充颜色从任何颜色更改为透明。我有以下代码:
polys[x].setOptions({
fillColor: "#FFFFFF",
fillOpacity: .01, //This changes throughout the program
strokeColor: '#000000',
});
Run Code Online (Sandbox Code Playgroud)
如何将fillColor设置为透明?是否有特定的十六进制值?
所述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
Run Code Online (Sandbox Code Playgroud)
更新:0.0 现在似乎适用于透明多边形(jsfiddle)
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
Run Code Online (Sandbox Code Playgroud)
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);
}Run Code Online (Sandbox Code Playgroud)
html,
body,
#map_canvas {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}Run Code Online (Sandbox Code Playgroud)