谷歌地图v3中多边形不透明度的转换

时间:2015-06-21 03:15:22

标签: javascript jquery google-maps google-maps-api-3

我需要看到颜色从零不透明度转换为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/

1 个答案:

答案 0 :(得分:0)

在while循环中的代码周围添加window.setTimeout();。 e.g。

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