谷歌地圖v3中多邊形不透明度的過渡

Question

我需要查看顏色從零不透明度到1的過渡。這個想法是，您可以看到顏色的過渡，但看不到如何做，這是我的代碼：

var geocoder;
var shape = [];
var map;
// Define the LatLng coordinates for the polygon's path.
var coordinates = [
    [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)],

    [
    new google.maps.LatLng(32.990236, -89.296875),
    new google.maps.LatLng(42.163403, -86.835938),
    new google.maps.LatLng(42.163403, -76.113281)]
];

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(35.394070, -78.515056),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

}

function update(color) {
    for (var i in coordinates) {
        var options = ({
            path: coordinates[i],
            strokeColor: 'black',
            strokeOpacity: 0.3,

            strokeWeight: 1,
            fillColor: color,
            fillOpacity: 0.9,
            zIndex: 1,
            map: map
        });
        if ( !! shape[i] && !! shape[i].setMap) {
            shape[i].setMap(null);
        }
        shape[i] = new google.maps.Polygon(options);
    }
}
var i = 0

    function reload() {
        i = i + 1;
        var color = "#FFFFFF";

        if (i % 2 == 0) {
            color = "#0000FF";
        }
        update(color);
    }

google.maps.event.addDomListener(window, "load", initialize);

我有一個想法可以處理這段代碼，但是如果可以的話就不行了，而且運行速度非常快。

var opa = 0;
while (opa <= 1) {
   shape[i].setMap(null);
   shape[i].fillOpacity = opa;
   shape[i].setMap(map);
   opa = opa + 0.1;
}

http://jsfiddle.net/qqgmhcmo/

Answer 1

添加一個window.setTimeout(); 在while循環內的代碼周圍。 例如

var opa=0;
while(opa<=1){
   window.setTimeout(function() {
      shape[i].setMap(null);
      shape[i].fillOpacity=opa;
      shape[i].setMap(map);
      opa=opa+0.1;
   }, 500);
}